Jak vytvářet www stránky

1. listopad 1999 - Seriály
Jak vytvářet www stránky - 1. díl
Dnes začínáme nový seriál, který vás postupně provede jazykem, jehož prostřednictvím můžete vytvářet webové stránky. Ten jazyk se jmenuje HTML (zkratka HyperText Markup Language) a sami uvidíte, že není vůbec složitý. Nejprve se naučíte vytvářet jen základní textové dokumenty, pak probereme grafiku, tabulky, na závěr se dostaneme ke kaskádovým stylům a bude-li zájem, budeme se v dalších dílech zabývat rozšířeními, které vyšperkují vaše www stránky.

8. listopad 1999 - Seriály
Jak vytvářet www stránky - 2. díl
V minulém díle jsme si vysvětlili základní strukturu HTML dokumentů, takže dnes se směle můžeme pustit do první www stránky. Pravda, nebude to zatím žádný zázrak, ale začínat se musí jednoduše

15. listopad 1999 - Seriály
Jak vytvářet www stránky - 3. díl
V minulém díle jsme si vysvětlili, jak definovat titulek stránky a jak zobrazit jednoduchý text v okně prohlížeče. Dnes se podíváme na to, jak určit základní (globální) vlastnosti stránky.

22. listopad 1999 - Seriály
Jak vytvářet www stránky - 4. díl
Formátování textu je základem každé www stránky. Mnoho tvůrců webových stránek používá grafiku, která zbytečně zatěžuje návštěvníky dlouhou dobou potřebnou pro její stažení a zobrazení. Podobného nebo stejného efektu lze často dosáhnout vhodně zvoleným formátováním, ale i zde platí zlaté pravidlo "někdy méně znamená více".

29. listopad 1999 - Seriály
Jak vytvářet www stránky - 5. díl
Nadpisy
Dnešním tématem pátého dílu seriálu o vytváření www stránek budou nadpisy. Nadpisy slouží k optickému členění stránky a je vhodné zachovávat při jejich používání jisté konvence.

13. prosinec 1999 - Seriály
Jak vytvářet www stránky - 6. díl
Vítejte u šestého pokračování našeho seriálu, který vás provede základy vytváření webových stránek. V dnešním díle se podíváme na to, jak lze vytvořit seznamy s odrážkami a krátce také nahlédneme do světa hyperlinkových odkazů, které jsou alfou a omegou Internetu.

20. prosinec 1999 - Seriály
Jak vytvářet www stránky - 7. díl
Odkazy
V šestém díle jsme si vysvětlili základy vytváření hyperlinkových odkazů. Shrnuto do jedné věty: hyperlinkový odkaz je část dokumentu (zpravidla zvýrazněná), která na kliknutí myší (případně na jiný podnět) aktivuje nějaké spojení. Může to být nejen spojení na jinou www stránku, ale třeba na obrázek, zvuk, video, nebo jakýkoli jiný soubor. Stejně tak existují odkazy, které vedou na jiné místo na téže stránce.

27. prosinec 1999 - Seriály
Jak vytvářet www stránky - 8. díl
Obrázky
Jak by asi vypadaly internetové stránky bez grafiky? V některých případech možná dobře, ale většinou potřebujete návštěvníka něčím zaujmout, upoutat jeho pozornost, a k tomu právě slouží různé grafické prvky.

3. leden 2000 - Seriály
Jak vytvářet www stránky - 9. díl
Ve čtvrtém díle jsme si pověděli něco málo o formátování písma v HTML dokumentech. Pokud náš seriál sledujete od začátku, pak umíte tučné písmo, kurzívu, podtržené písmo a sedm dalších typů formátování. Jak ale například udělat barevný text, text určité velikosti, nebo text, který je napsaný jiným než standardním písmem? Toto umožňuje párový tag FONT, kterému věnujeme dnešní díl našeho seriálu.

10. leden 2000 - Seriály
Jak vytvářet www stránky - 10. díl
Tabulky
Jak jsem slíbil v minulém díle, budeme se dnes věnovat poněkud náročnějšímu tématu - tabulkám. Protože toto téma je poněkud obsáhlejší, budeme se mu věnovat i v příštích dílech našeho seriálu.

17. leden 2000 - Seriály
Jak vytvářet www stránky - 11. díl
V minulém díle jsme si vysvětlili, že k vytvoření tabulky vystačíme se třemi základními tagy - TABLE, TR a TD. Zmínili jsme také některé parametry, s jejichž pomocí je možné určit zarovnání obsahu buňky, barvy či třeba šířku mřížky. Dnes se budeme věnovat teorii a podíváme se podrobně na všechny parametry, které můžete při tvorbě tabulek potřebovat.

24. leden 2000 - Seriály
Jak vytvářet www stránky - 12. díl
V minulém díle jsme se zaměřili trochu více na teorii, které se budeme věnovat i dnes, a pak si ukážeme, jak můžete tabulky prakticky využít při formátování www stránek.

31. leden 2000 - Seriály
Jak vytvářet www stránky - 13. díl
Formuláře
Dosud jsme se věnovali pouze tomu, jak předat informace návštěvníkům stránek, tedy směrem od vás. Důležitým prvkem Internetu je ale komunikace a to komunikace obousměrná. Je sice pěkné, když budete moci sdělit svůj názor, ovšem bylo by více než dobré, kdybyste umožnili sdělit názor i vašim čtenářům. K tomu existuje několik způsobů jako například diskuzní fóra, knihy návštěv nebo formuláře. Právě poslední zmíněný způsob bude tématem tohoto dílu našeho seriálu.

7. únor 2000 - Seriály
Jak vytvářet www stránky - 14. díl
Formuláře - pokračování
V minulém díle jsme si ukázali několik základních prvků potřebných k vytvoření formuláře. Dnes budeme v tomto tématu pokračovat a povíme si o dalších prvcích, které je možné ve formulářích použít.

21. únor 2000 - Seriály
Jak vytvářet www stránky - 15. díl
Formuláře - 2. pokračování
Minulé dva díly jsme věnovali formulářům a nejinak tomu bude i tentokrát. V tomto již patnáctém pokračování se podíváme na další prvky, které lze umístit do formuláře a na závěr vás čeká lahůdka, díky níž budou moci návštěvníci vašich stránek vyhledávat v českém Internetu pomocí jednoho ze tří největších vyhledávacích serverů. Příští týden bude trošku oddychový, protože si ukážeme několik tipů a triků, ale na to si budete muset ještě sedm dnů počkat. Takže hurá na formuláře!

28. únor 2000 - Seriály
Jak vytvářet www stránky - 16. díl
Formuláře - 3. pokračování
Dnes si ukážeme, jak můžete vyšperkovat své webové formuláře pomocí několika jednoduchých fíglů. Na závěr si ukážeme několik tipů a triků, které zatraktivní vaše stránky a také usnadní orientaci vašim návštěvníkům.

27. březen 2000 - Seriály
Jak vytvářet www stránky - 17. díl
V uplynulých šestnácti dílech jsme si poměrně podrobně vysvětlili, jak vytvářet www stránky. Pokud jste vydrželi a četli pečlivě každé pokračování, pak umíte v tuto chvíli vytvořit vlastní webovou prezentaci a možná vás napadá otázka, jak dostat stránky ze svého pevného disku na Internet. Právě tomuto tématu věnujeme dnešní kapitolu.

3. duben 2000 - Seriály
Jak vytvářet www stránky - 18. díl
Rámy milované i nenáviděné. Na jednu stranu přinášejí řadu výhod, na druhou mohou způsobovat problémy. Ať tak nebo tak, do HTML patří a proto jim věnujeme dva díly našeho seriálu.

10. duben 2000 - Seriály
Jak vytvářet www stránky - 19. díl
V předcházejícím díle jsme si vysvětlili základy vytváření stránek s rámy – umíte tedy vytvořit stránku, která se skládá z několika jiných stránek a umíte také určit jejich rozložení. Kouzlo rámů ale spočívá v něčem jiném, než pouze v tom, že načtete do prohlížeče více stránek současně. Jak jsme již naznačili, slouží rámy především ke snadnějšímu ovládání stránek. Povíme si také něco o nevýhodách rámů.

17. duben 2000 - Seriály
Jak vytvářet www stránky - 20. díl
Vkládání objektů
Multimediální rozšíření HTML umožňují autorům webových stránek vkládání obrázků, apletů, video klipů a dalších rozšíření, jež mohou stránku proměnit doslova k nepoznání.

25. duben 2000 - Seriály
Jak vytvářet www stránky - 21. díl
Obrázkové mapy
Tématem tohoto dílu budou obrázkové nebo též "klikací" mapy. Názory na jejich použití se liší - můžete se setkat s názory, že klikací mapy jsou přežitkem a jejich použití není z mnoha důvodů doporučené, jiné zdroje je zase doporučují, neboť umožňují snadné vytváření různých menu. Ať je pravda na té které straně, obrázkové mapy jsou součástí HTML a proto v našem seriálu prostě nemohou chybět.

2. květen 2000 - Seriály
Jak vytvářet www stránky - 22. díl
Dostali jsme se k posledním dílům našeho seriálu, jehož cílem bylo naučit vás samostatně vytvářet www stránky. Následující týdny tedy věnujeme tagům, které jsme v uplynulých lekcích vynechali.

9. květen 2000 - Seriály
Jak vytvářet www stránky - 23. díl
Minule jsme začali probírat některé méně důležité tagy, na něž nezbylo místo v žádné z předcházejících kapitol. Dnes budeme pokračovat, takže držte si klobouky, jedeme z kopce.

15. květen 2000 - Seriály
Jak vytvářet www stránky - 24. díl
Vítám vás u předposledního dílu našeho seriálu o vytváření webových stránek. Podobně jako minule a předminule se stručně podíváme na některé tagy, jež jsme nezmínili v uplynulých dílech. Takže pojďme do toho.

22. květen 2000 - Seriály
Jak vytvářet www stránky - 25. díl
Vítejte u posledního dílu našeho seriálu, který vás provedl úskalími jazyka zvaného HTML. Dnes se podíváme na to, co můžete pro své stránky udělat, jak je dále vylepšit a také jak je propagovat.

© Karel Kilián ml., autor je šéfredaktorem denního zpravodajství 1. PC Revue! a externím redaktorem serveru Živě a časopisu Computer.


HTMLHelp File Created Using:

Web2HTMLHelp 		Free To Download From:
http://www.web2htmlhelp.co.uk

Also Available:
HTMLHelp ePublisher
HTMLHelp eDocument Creation Made Easy

Free To Download From:
http://www.htmlhelp-epublisher.co.uk

[ Back ]


Jak vytvářet www stránky - 1. díl

1. listopad 1999 - Seriály

Dnes začínáme nový seriál, který vás postupně provede jazykem, jehož prostřednictvím můžete vytvářet webové stránky. Ten jazyk se jmenuje HTML (zkratka HyperText Markup Language) a sami uvidíte, že není vůbec složitý. Nejprve se naučíte vytvářet jen základní textové dokumenty, pak probereme grafiku, tabulky, na závěr se dostaneme ke kaskádovým stylům a bude-li zájem, budeme se v dalších dílech zabývat rozšířeními, které vyšperkují vaše www stránky.

Jaký potřebujete software?

V podstatě se dá říci, že vystačíte s obyčejným Poznámkovým blokem, který obsahují všechny verze Windows (ve Windows 9x najdete tento program tak, že kliknete na tlačítko Start, zvolíte Programy-Příslušenství-Poznámkový blok). Abyste si mohli své výtvory prohlédnout, budete potřebovat prohlížeč (browser). Windows 98 obsahují standardně MS Internet Explorer 4.0, majitelé Windows 95 a NT si budou muset prohlížeč doinstalovat. V případě, že by vám Internet Explorer nevyhovoval, můžete použít některý z alternativních programů jako Netscape Navigator nebo Operu.

Jaká je struktura dokumentů HTML?

Dokumenty HTML jsou v podstatě prostý text bez jakéhokoliv formátování. Vlastní formátování má na starosti browser, který na základě řídících značek (tzv. tagů) určuje parametry písma a rozložení objektů na stránce.

Co jsou to tagy?

Tagy jsou značky, které sdělují browseru, jak má zobrazit text, obrázek nebo jiný objekt. Od okolního textu se tagy odlišují tím, že jsou uzavřeny mezi znaky menší než < a větší než >. Rozlišujeme tagy párové a tagy nepárové.
  • Párové tagy mají uvozovací a uzavírací část. Uzavírací část se od uvozovací liší tím, že obsahuje znak lomítka /. Podle pravidel HTML je nutné, aby párové tagy byly uzavřeny, jinak by mohlo dojít k jejich nekorektnímu zpracování. Párové tagy se například využívají pro formátování textu, kde uvozovací tag zařazujeme před začátek a uzavírací na konec textu, který chceme formátovat.
    Příklad: pokud chci, aby se slovo ahoj napsalo tučně, použiji nejprve uvozovací tag pro tučné písmo, napíšu ahoj a nakonec použiji uzavírací tag pro tučné písmo (<b>ahoj</b>).
  • Nepárové tagy mají pouze jednu část. Používají se například pro formátování odstavců.
    Příklad: pokud chci zalomit řádek, použiji tag <br>, čímž dojde k zalomení řádku (uzavírací tag by v tomto případě neměl smysl).

Základní struktura www stránky

Každá stránka se skládá ze dvou částí: hlavičky a těla. Typický www dokument vypadá následovně:

<HTML>

<HEAD>
obsah hlavičky
</HEAD>

<BODY>
.
.
.
samotný obsah stránky
.
.
.
</BODY>
</HTML>

Všimněte si tří tagů, které jsou v HTML dokumentech povinné: HTML, HEAD a BODY

  • <HTML> se zařazuje na úplný začátek dokumentu, kde oznamuje, že se jedná o dokument ve formátu HTML. Uzavírací část <HTML> se dává až na konec dokumentu.
  • <HEAD> označuje hlavičku, která může obsahovat řadu údajů (jako například titulek, který se zobrazuje v liště prohlížeče po natažení stránky). Základní parametry hlavičky si probereme v příští lekci tohoto seriálu.
  • <BODY> označuje tělo dokumentu, tedy tu část, kam budete psát vlastní obsah stránky. Tag BODY musí následovat vždy až za tagem HEAD (nemůžete zařadit obsah dokument a teprve po něm hlavičku). Uzavírací tag </BODY> se zpravidla zařazuje těsně před konec dokumentu, tedy před uzavírací tag </HTML>.
Dnešní díl byl trochu více teoretický, ale už v dalším si vytvoříte svojí první www stránku. Za týden se těším na další setkání.


Jak vytvářet www stránky - 2. díl

8. listopad 1999 - Seriály

V minulém díle jsme si vysvětlili základní strukturu HTML dokumentů, takže dnes se směle můžeme pustit do první www stránky. Pravda, nebude to zatím žádný zázrak, ale začínat se musí jednoduše.

Titulek stránky

Titulek stránky určuje, jaký text se zobrazí v záhlaví browseru (tj. v modré liště v horní části). Měl by být stručný a přitom výstižný, protože například MS Internet Explorer 5.0 nabízí při uložení stránky na disk jako implicitní název souboru právě titulek stránky. Titulek je ohraničen tagy <TITLE> a </TITLE> (je párový, čili nesmíte zapomenout na uzavírací tag) a vkládá se do hlavičky dokumentu. Prázdný dokument s titulkem "Toto je moje první www stránka" můžete vytvořit následovně:

<HTML>
<HEAD>
<TITLE>Toto je moje první www stránka</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

Vyzkoušejte si takový dokument uložit s příponou htm nebo html a otevřete jej v libovolném browseru. Výsledek bude vypadat podobně jako na obrázku.

Takto bude vypadat záhlaví browseru

Text a zalamování řádků

Tak jsme si změnili popisek okna, ale jak zobrazit něco přímo v okně prohlížeče? Velmi jednoduše. Stačí napsat libovolný text mezi do těla dokumentu (tj. mezi tagy BODY). Pro začátek napište jen jediný řádek a prohlédněte si, jak se dokument zobrazí v browseru. Pak připište další řádek a podívejte se na výsledek. Že něco nefunguje, protože se oba řádky sloučily v jeden? Ale naopak! HTML totiž nerozlišuje znak ukončení řádky (který jste provedli klávesou Enter) jako jiné aplikace. K zalomení řádky se totiž v HTML používá tag <BR>, který není párový, proto jednoduše tam, kde chcete zalomit řádek vložíte <BR> a můžete pokračovat. Vyzkoušejte si uložit následující kód a otevřít jej ve svém browseru.

<HTML>
<HEAD>
<TITLE>Ukázka zalamování řádků v HTML</TITLE>
</HEAD>

<BODY>
Jak sami vidíte, je úplně jedno, že jsem TADY
stiskl klávesu Enter, protože prohlížeče takový způsob řádkování neakceptují. Zato když TADY <BR> vložíte tag BR označující zalomení řádku, tak se řádek zalomí.
</BODY>
</HTML>

Výsledek bude vypadat následovně:
Jak sami vidíte, je úplně jedno, že jsem TADY stiskl klávesu Enter, protože prohlížeče takový způsob řádkování neakceptují. Zato když TADY
vložíte tag BR označující zalomení řádku, tak se řádek zalomí.

Tagů <BR> můžete napsat i více za sebou – každý znamená odřádkování o jeden řádek.

Pro tento týden si dáme pohov – zatím se naučte pracovat s řádkováním a zkuste si vytvořit nějakou jednoduchou stránečku s titulkem a textem. Příště si povíme něco o zarovnávání odstavců a podíváme se také na to, jak udělat výrazný nadpis stránky.


Jak vytvářet www stránky - 3. díl

15. listopad 1999 - Seriály

V minulém díle jsme si vysvětlili, jak definovat titulek stránky a jak zobrazit jednoduchý text v okně prohlížeče. Dnes se podíváme na to, jak určit základní (globální) vlastnosti stránky.

Definování vlastností stránky

Tag BODY, jak jsme si již řekli, slouží k vymezení oblasti, která bude zobrazena v okně prohlížeče (uvnitř tohoto tagu tedy najdete všechen text, obrázky, formátování atp.). Kromě toho můžete pomocí parametrů definovat vlastnosti stránky, jako například barvu pozadí, písma, odkazů nebo obrázek na pozadí. Parametry se vždy uvádějí uvnitř uvozovacího tagu. Obecně platí následující konvence: <TAG parametr1="hodnota" parametr2="hodnota">obsah</TAG>.

Obrázek na pozadí

Obrázek na pozadí stránky může být ve formátu GIF nebo JPG. Definujeme jej parametrem background v tagu BODY, kde hodnota parametru background je adresa, na níž je příslušný obrázek uložen. Cesta může být relativní nebo absolutní.
  • relativní určení cesty – je jednoznačně vhodnější způsob, protože pokud přemístíte své stránky na jiný server, nebudete muset přepisovat cesty v každém dokumentu. Máte-li například obrázek pozadi.jpg v podadresáři IMAGES, určíte cestu background="IMAGES/pozadi.jpg". Je-li obrázek umístěn ve stejném adresáři jako stránka stačí uvést pouze jeho jméno (background="pozadi.jpg").
  • absolutní určení cesty – se používá spíše výjimečně. Můžete například určit, že chcete použít obrázek, který máte umístěný na jiném serveru. V tomto případě nesmíte zapomenout na určení protokolu (používá se http). Obrázek na pozadí můžete definovat například následovně: background="http://www.mujweb.cz/www/mojeobrazky/pozadi.gif".

Barva pozadí

Jestliže nechcete použít na pozadí obrázek, můžete nastavit barvu, kterou bude vyplněno pozadí stránky. V každém případě je vhodné na barvu pozadí nezapomínat. Pokud totiž tento parametr vynecháte, zobrazí se návštěvníkovi pozadí stránky podle jeho nastavení prohlížeče nebo operačního systému, což nemusí být vždy optimální.

Nezapomeňte, že definice obrázku na pozadí má vyšší prioritu, než definice barvy pozadí, takže návštěvník uvidí obrázek, nikoliv barvu pozadí (výjimkou je pouze transparentní GIF, o němž si povíme později). Barva pozadí se uplatní také tehdy, má-li návštěvník vypnuté zobrazování grafiky.

Barvy lze v HTML definovat dvěma způsoby:

  1. Názvem. Podporováno je následujících šestnáct barev:
    • BLACK - černá
    • SILVER - stříbrná
    • GRAY – tmavě šedá
    • WHITE - bílá
    • MAROON – kaštanová
    • RED - červená
    • PURPLE – tmavě fialová
    • FUCHSIA - fuchsiová
    • GREEN - zelená
    • LIME - žlutozelená
    • OLIVE - olivová
    • YELLOW - žlutá
    • NAVY – námořnická modrá
    • BLUE - modrá
    • TEAL - šedozelená
    • AQUA – tyrkysová
  2. Hexadecimálně. Tímto způsobem můžete definovat až 16'581'375 barev. Barvy se určují poměrem RGB (tedy červená – zelená – modrá) v hexadecimálním tvaru (00, 01, 02, ..., FD, FE, FF), přičemž pro každou barvu jsou určeny dvě číslice. Černá například vznikne, "smícháte-li" červenou, zelenou a modrou v nejvyšší "hustotě" – tedy FFFFFF. Bílá naopak znamená, že žádná barva není použita, takže jí vyjádříme jako 000000. Čistá červená vznikne tak, že použijeme z palety RGB pouze červenou barvu (tedy R) – FF0000. Určujeme-li barvy hexadecimálně, uvozujeme je znakem křížek #.
Barvu pozadí tedy můžete definovat parametrem bgcolor="red" stejně jako bgcolor="#FF0000".

Barva textu

Není-li určeno jinak, zobrazí se text barvou, kterou nadefinujete v tagu BODY. K tomu slouží parametr text, který určuje barvu textu stejným způsobem, jako parametr bgcolor určuje barvu pozadí stránky.

Chcete-li tedy například použít černé písmo, napíšete text="black" nebo text="#FFFFFF".

Barva odkazů

Odkazy na stránce mohou mít nadefinovány tři různé barvy:
  1. Barva odkazu, na který uživatel ještě nekliknul – parametr link.
  2. Barva odkazu, v okamžiku, kdy na něj uživatel klikne myší – parametr alink.
  3. Odkaz, na který již uživatel kliknul (tedy navštívil odkazovanou stránku) – parametr vlink.
Zejména určení první a třetí barvy je velmi důležité, protože usnadňuje návštěvníkovi orientaci na stránce – snadno tak může poznat, kterou stránku na vašem webu již navštívil a kterou ještě ne. Jednotlivé barvy se určují zcela shodně, jako v předcházejících případech.

Jestliže tedy chcete, aby nenavštívené odkazy byly modré, po ukázání myší zezelenaly a po navštívení byly fialové, použijete syntaxi link="blue" alink="green" vlink="fuchsia" nebo link"#0000FF" alink="00FF00" vlink="FF00FF".

Shrnutí

Na závěr si uděláme modelový příklad. Chceme stránku, která má následující parametry:
  • bílou barvu pozadí
  • obrázek pozadi.gif, který je umístěn v podadresáři IMAGES
  • černé písmo
  • nenavštívené odkazy modrou barvou, přičemž tyto odkazy při kliknutí zezelenají
  • navštívené odkazy červenou barvou
Kód takové stránky by tedy mohl vypadat následovně:

<HTML>
<HEAD>
<TITLE>Zkušební stránka</TITLE>
</HEAD>
<BODY bgcolor="#00000" background="IMAGES/pozadi.gif" text="#FFFFFF" link="#0000FF" alink="#00FF00" vlink="#FF0000">
.
.
.
obsah stránky
.
.
.
</BODY>
</HTML>

Do příští lekce si vyzkoušejte vytvořit vlastní variace barev textu, odkazů a pozadí stránky.


Jak vytvářet www stránky - 4. díl

22. listopad 1999 - Seriály

Formátování textu je základem každé www stránky. Mnoho tvůrců webových stránek používá grafiku, která zbytečně zatěžuje návštěvníky dlouhou dobou potřebnou pro její stažení a zobrazení. Podobného nebo stejného efektu lze často dosáhnout vhodně zvoleným formátováním, ale i zde platí zlaté pravidlo "někdy méně znamená více". Snažte se tedy formátovaný text používat s mírou a pamatujte i na uživatele s textovými browsery, kterým například tučné písmo nemusí říkat vůbec nic.

Základní způsoby formátování písma

Text může být tučný, kurzívou nebo podtržený (jednotlivé řezy je možné kombinovat například takto).

Tučný řez písma

Tučné písmo definujeme párovým tagem <B>, kde uváděcí tag označuje začátek a ukončovací tag konec tučného textu.

Příklad:
Chceme-li zvýraznit <B>tento text</B> použijeme tučné písmo.
Ukázka:
Chceme-li zvýraznit tento text použijeme tučné písmo.

Šikmý řez písma (kurzíva)

Kurzívu definujeme párovým tagem <I>. Uváděcí tag označuje začátek formátovaného textu, ukončovací pak konec.

Příklad:
<I>Takto</I> vypadá text formátovaný kurzívou
Ukázka:
Takto vypadá text formátovaný kurzívou

Podtržené písmo

Chceme-li zvýraznit text podtržením, použijeme k tomu párový tag <U>. Konvence je stejná, jako v předchozích dvou případech. Zejména na www stránkách, kde jsou hyperlinkové odkazy řešené podtržením nedoporučujeme podtrhávat běžný text, protože stránka tím může ztratit přehlednost a návštěvník může být zmaten tím, že podtržený text nefunguje jako odkaz.

Příklad:
Text můžeme zdůraznit <U>podtržením</U>, ovšem není to zrovna nejvhodnější metoda....
Ukázka:
Text můžeme zdůraznit podtržením, ovšem není to zrovna nejvhodnější metoda....

Další způsoby formátování písma

Kromě tří výše uvedených způsobů existují ještě další tagy pro formátování písma, které zmíníme jen stručně:
  • <BIG> - velké písmo (písmo o jeden bod větší než standardní)
    Ukázka: Toto je normální písmo a takto vypadá velké písmo

  • <CODE> - neproporcionální písmo vhodné zejména pro výpisy zdrojových kódů
    Ukázka: if var(1)=10 then gosub identifikace

  • <SMALL> - malé písmo (písmo o jeden bod menší než standardní)
    Ukázka: Takto vypadá normální a a takto malé písmo

  • <STRIKE> - přeškrtnutý text
    Ukázka: Přeškrtnutím můžete například zdůraznit, že některá část dokumentu již neplatí

  • <SUB> - dolní index
    Ukázka: Dolní index využijete například v chemických vzorcích H2O, H2SO4

  • <SUP> - horní index
    Ukázka: V matematice a fyzice se bez horního indexu jednoduše neobejdete. Příkladem budiž vzorec kvadratické rovnice (a+b)2=a2+2ab+b2

  • <TT> - Teletype - zpravidla neproporcionální písmo připomínající psací stroj
    Ukázka: Formátování Teletype není příliš používané, přesto je zmíněno v normě W3C

Existuje ještě řada formátovacích elementů, které ale můžete alternovat vzájemnou kombinací tagů, jež jsme si uvedli v dnešním přehledu. Tyto tagy totiž zobrazí většina browserů podobně, zatímco některé méně používané vypadají v každém programu o něco jinak.

Malý domácí úkol do příštího týdne, kdy si vysvětlíme nadpisy a formátování odstavců: vytvořte si HTML stránku, na níž použijete všechny typy formátování, které jsme si dnes vysvětlili. Přeji mnoho štěstí.


Jak vytvářet www stránky - 5. díl

29. listopad 1999 - Seriály

Nadpisy

Dnešním tématem pátého dílu seriálu o vytváření www stránek budou nadpisy. Nadpisy slouží k optickému členění stránky a je vhodné zachovávat při jejich používání jisté konvence. Nadpis stránky by měl být, zcela logicky, největší, stejně tak nadpisy rozdělující stránku na jednotlivé části (sekce, kapitoly, ...) by měly být menší, a vzájemně stejně velké. Čtenář tak snadno získá přehled a usnadní se mu orientace v dokumentu. HTML rozlišuje šest úrovní nadpisů označovaných tagy <H1> (největší) až <H6> (nejmenší). Ve standardním formátu vypadají jednotlivé úrovně následovně:

<H1>Nadpis první úrovně je největší</H1>

Nadpis první úrovně je největší

<H2>Nadpis druhé úrovně je ještě docela velký</H2>

Nadpis druhé úrovně je ještě docela velký

<H3>Nadpis třetí úrovně je o něco menší</H3>

Nadpis třetí úrovně je o něco menší

<H4>Nadpis čtvrté úrovně je ještě menší</H4>

Nadpis čtvrté úrovně je ještě menší

<H5>Nadpis páté úrovně je malý</H5>
Nadpis páté úrovně je malý
<H6>Nadpis šesté úrovně je nejmenší</H6>
Nadpis šesté úrovně je nejmenší
Jak sami vidíte, jsou poslední tři úrovně nadpisu stejně velké, nebo dokonce menší, než standardní písmo použité v dokumentu. Praktické využití tedy najdou především nadpisy H1, H2 až H3.

Za normálních okolností je nadpis zarovnán na levou stranu stránky, ovšem parametrem align jej můžete zarovnat doleva (left), doprava (right), na střed (center) nebo na do bloku (justify). Výsledek pak může vypadat následovně:

<H2 align="left">doleva</H2>

doleva

<H2 align="right">doprava</H2>

doprava

<H2 align="center">vystředěný</H2>

vystředěný

<H2 align="justify">nadpis zarovnaný do bloku</H2>

nadpis zarovnaný do bloku

Nadpisy mají jednu zajímavou vlastnost: chovají se jako samostatné odstavce, takže před uvozovacím a hned po uzavíracím tagu automaticky následuje přechod na další řádek. Nejlépe si to můžete představit na příkladě:

tento text zůstane řádek před <H3&>nadpisem</H3> a tento řádek pod ním

tento text zůstane řádek před

nadpisem

a tento řádek pod ním

Doporučujeme nadpis první úrovně (H1) použít dokumentu pouze jednou a to na hlavní nadpis stránky (tedy úplně nahoru). Tento nadpis by se měl shodovat s titulkem stránky (tj. s tím, co jste uvedli mezi tagy <title> a </TITLE>). Nadpis druhé úrovně používejte pro názvy jednotlivých sekcí stránky, nadpis třetí úrovně pak pro jemnější členění. Je-li nutné použít ještě menšího nadpisu, zkuste se zamyslet nad tím, zda váš dokument nebude vypadat nepřehledně a zda by nebylo vhodnější rozdělit jej na několik samostatných stránek.

Tolik tedy pro tento týden. V příštím díle se podíváme na to, jak snadno a rychle vytvořit seznamy s odrážkami a dále na jednu z nejdůležitějších věcí - vytváření hyperlinkových odkazů.


Jak vytvářet www stránky - 6. díl

13. prosinec 1999 - Seriály

Vítejte u šestého pokračování našeho seriálu, který vás provede základy vytváření webových stránek. V dnešním díle se podíváme na to, jak lze vytvořit seznamy s odrážkami a krátce také nahlédneme do světa hyperlinkových odkazů, které jsou alfou a omegou Internetu.

Nečíslovaný seznam

Nečíslovaný seznam uvedete tagem <UL> (UL=unnumbered list), každou položku seznamu pak nepárovým tagem <LI> (LI=list item), vše nakonec uzavřete uzavíracím tagem </UL>. Lépe bude vysvětlit si to celé na názorném příkladu:

<UL>
<LI>první
<LI>druhá
<LI>třetí
<LI>čtvrtá
</UL>

Výsledek bude vypadat následovně:

  • první
  • druhá
  • třetí
  • čtvrtá

Jak do tagu <UL>, tak i do tagu <LI>; lze uvést parametr TYPE určující, jak budou vypadat odrážky. Tento parametr může mít tři následující hodnoty:

TYPE=disc - prázdné kolečko
TYPE=circle - plné kolečko
TYPE=square - čtverec

Číslovaný seznam

Číslovaný seznam se od nečíslovaného liší především tím, že jej uvádíte tagem <OL> (ordered list) a ukončujete </OL>. Postup použití je stejný jako v předcházejícím případě, pouze jsou místo grafických odrážek zobrazeny číslice nebo písmena.

Příklad:

<OL>
<LI>první
<LI>druhá
<LI>třetí
<LI>čtvrtá
</OL>

A výsledek bude vypadat takto:

  1. první
  2. druhá
  3. třetí
  4. čtvrtá

Podobně jako u tagu <UL> můžete parametrem TYPE definovat typ číslování:

TYPE=A - velká písmena (A, B, C ...)
TYPE=a - malá písmena (a, b, c ...)
TYPE=I - velké římské číslice (I, II, III ...)
TYPE=i - malé římské číslice (i, ii, iii ...)
TYPE=1 - arabské číslice (1, 2, 3 ...)
Chcete-li číslovat seznam od jiného, než implicitně prvního čísla nebo písmena (1, I, a, A, ...), můžete použít Parametr START. Oba parametry si názorně vysvětlíme na příkladě:

<OL TYPE=a START=3>
<LI>Jak sami vidíte, tento seznam začíná písmenem c
<LI>protože parametr TYPE má hodnotu a
<LI>a parametr START hodnotu 3
</OL>

Výsledek vidíte zde:

  3. Jak sami vidíte, tento seznam začíná písmenem c
  4. protože parametr TYPE má hodnotu a
  5. a parametr START hodnotu 3

Vnořování seznamů

Seznamy lze do sebe libovolně vnořovat. Můžete vytvořit vnořený číslovaný i nečíslovaný seznam, stejně jako vnořený seznam kombinující jak číslované, tak nečíslované položky.

<OL type=1>
<LI>První položka číslovaného seznamu, který se dále větví
<Ul type=circle>
<LI>na další
<LI>a další nečíslované položky
</UL>
<LI>Tady máme druhou položku
<LI>Tady třetí
<LI>A tady čvtrtou, která se větví
<OL type=a>
<LI>na další
<LI>a další
<LI>a ještě jednu číslovanou položku
</OL>
</OL>

Výsledek by měl vypadat takto:

  1. První položka číslovaného seznamu, který se dále větví
    • na další
    • a další nečíslované položky
  2. Tady máme druhou položku
  3. Tady třetí
  4. A tady čvtrtou, která se větví
    1. na další
    2. a další
    3. a ještě jednu číslovanou položku
Důležité je nazapomínat na správné uzavírání párových tagů - ke každému uvozovacímu tagu musí existovat i tag ukončovací.

Hyperlinkové odkazy

Element <A> (anchor neboli kotva) je základním kamenem webových stránek. Umožňuje vytváření hyperlinkových odkazů, které mohou směrovat na jinou stránku nebo soubor. Právě díky vzájemnému protkání stránek hyperlinkovými odkazy bývá Internet často označován slovem pavučina (původ pochází z anglického slovíčka web). Dnes se naučíme vytvořit jednoduchý odkaz na jinou www stránku.

Element <A> má následující základní strukturu:

<A HREF="soubor, na který se odkazuje">popis odkazu</A>

Místo textu soubor, na který se odkazuje vložíte mezi uvozovky adresu na stránku nebo soubor, na níž odkazujete. Odkazujete-li na stránku (tj. dokument s příponou htm, html, asp, ...), otevře se po kliknutí tato stránka v okně prohlížeče. Jestliže odkazujete na soubor, zachová se browser podle toho, jakou příponu má odkazovaný soubor - nabídne uložení na disk nebo spustí přidruženou aplikaci a otevře v ní zmíněný soubor.

Text popis odkazu nahradíte tím, co uvidí uživatel jako text ve svém prohlížeči.

Příklad:

po kliknutí na <A HREF="http://www.seznam.cz">tento odkaz</A> přejdete na stránku vyhledávače Seznam

Výsledek bude vypadat takto (zkuste si myší kliknout na text tento odkaz):

po kliknutí na tento odkaz přejdete na stránku vyhledávače Seznam

Tímto jsme vytvořili odkaz na server www.seznam.cz. Neodkazujeme na žádnou konkrétní stránku, takže prohlížeč bude na serveru automaticky hledat stránky index, default nebo main.

Chcete-li například vytvořit odkaz na stránku nabízející aktuální vydání britské hitparády, budete muset odkaz směrovat přesněji:

<A HREF="http://www.dotmusic.com/charts/top75singles_print.asp">Oficiální britská top 75</A>

V tomto případě odkazujete na stránku top75singles_print.asp umístěnou v adresáři charts na serveru www.dotmusic.com.

Pro tento týden si dáme pohov, ale těšte se - příště si povíme o hyperlinkových odkazech další podrobnosti. Do té doby si můžete procvičovat vytváření vnořených seznamů protknutých hyperlinky.


Jak vytvářet www stránky - 7. díl

20. prosinec 1999 - Seriály

Odkazy

V šestém díle jsme si vysvětlili základy vytváření hyperlinkových odkazů. Shrnuto do jedné věty: hyperlinkový odkaz je část dokumentu (zpravidla zvýrazněná), která na kliknutí myší (případně na jiný podnět) aktivuje nějaké spojení. Může to být nejen spojení na jinou www stránku, ale třeba na obrázek, zvuk, video, nebo jakýkoli jiný soubor. Stejně tak existují odkazy, které vedou na jiné místo na téže stránce.

Aby odkaz fungoval, tedy odkazoval tam kam má, je nutné správně zadat adresu souboru (URL), na nějž odkazujeme. Je dobré dodržovat pravidlo, že odkazy vedoucí na stejný server určujeme relativně, odkazy vedoucí na jiný server určujeme absolutně. Odpadne vám spousta starostí v okamžiku, kdy se rozhodnete přesunout své stránky na jiný server. Lépe toto téma osvětlí následující příklady:

  1. Dokument, z nějž vede odkaz (např. start.htm), je ve stejném adresáři jako dokument, na který odkazujeme (např. cíl.htm)

    • adresa prvního dokumentu je např. http://www.zive.cz/start.htm
    • adresa druhého dokumentu je např. http://www.zive.cz/cil.htm

    V tomto případě není nutné psát odkaz včetně http a názvu serveru - postačí odkaz <A href="cil.htm">klikněte sem</A>. Po kliknutí na takový odkaz bude cílový dokument hledán na stejném serveru, v témže adresáři.

  2. Dokument, z nějž vede odkaz, je na stejném serveru, jako dokument, na který odkazujeme, ale je v jiném adresáři

    • adresa prvního dokumentu je např. http://www.zive.cz/start.htm
    • adresa druhého dokumentu je např. http://www.zive.cz/hardware/cil.htm

    Ani tentokrát není nutné psát název serveru - postačí, když určíte adresář, v němž je cílový dokument umístěn. Tentokrát tedy použijeme <A href="hardware/cil.htm">klikněte sem</A>.

    Jak to ale udělat, potřebujeme-li odkázat do adresáře, který je hierarchický výše - tedy například z dokumentu cil.htm na dokument start.htm? Tady vystačíme se dvěma tečkami, které znamenají "adresář o jednu úroveň výše". Odkaz by tedy vypadal takto <A href="../start.htm">klikněte sem</A>.

  3. Dokument, z nějž vede odkaz, je na jiném serveru, než cílový dokument

    • adresa prvního dokumentu je např. http://www.zive.cz/start.htm
    • adresa druhého dokumentu je např. http://www.test.cz/cil.htm

    V tomto případě musíme použít absolutní adresu, tedy <A href="http://www.test.cz/cil.htm">klikněte sem</A>.

Odkaz na konkrétní místo v dokumentu

Máte-li dlouhý dokument, který z nějakého důvodu nechcete rozdělit na více stránek (např. znění nějakého předpisu), můžete čtenáři usnadnit orientaci použitím odkazů na důležitá místa v dokumentu. Tato místa si označíte tagem <A name="nejake jmeno">, kde nejake jmeno je řetězec složený z libovolných písmen (raději bez diakritiky) nebo číslic, který musí být v celém dokumentu jedinečný. Takový tag je pro čtenáře neviditelný, slouží pouze prohlížeči jako značka, na níž se odkazuje hyperlinkovým odkazem ve tvaru <A href="#nejake jmeno">text který čtenář uvidí</A> (všimněte si zejména znaku # - křížek).

Příklad:
<H1>Návrh zákona</H1>
obsah:
<UL>
<LI><A href="#uvod">Úvodní ustanovení</A>
<LI><A href="#zneni">Znění zákona</A>
<LI><A href="#zaver">Závěrečná část</A>
</UL>
<A name="uvod">
<H2>Úvodní ustanovení</H2>
.
.
.
<A name="zneni">
<H2>Znění zákona</H2>
.
.
.
<A name="zaver">
<H2>Závěrečná část</H2>
.
.
.

Pokud pak čtenář klikne v obsahu například na link Závěrečná část, posune se stránka v prohlížeči tam, kde je neviditelná značka zaver.

Další možnosti tagu <A>

TITLE - titulek, který se zobrazí zůstane-li návštěvník vašich stránek stát kurzorem myši nad odkazem. Může sloužit například k vysvětlení, kam příslušný odkaz vede.
Příklad:
<A href="http://www.zive.cz" title="denní zpravodajství o počítačích">Živě</A>

TARGET - má své opodstatnění především ve stránkách obsahujících rámy. V klasické stránce využijete tento parametr jedině s hodnotou _blank, kdy způsobí otevření odkazu v novém okně prohlížeče.
Příklad:
<A href="http://www.zive.cz" target="_blank">Živě</A>

ACCESSKEY - slouží k zjednodušení přístupu - na takový odkaz nemusíte klikat myší, ale aktivujete jej klávesovou zkratkou Alt+písmeno.
Příklad:
<A href="http://www.zive.cz" accesskey="i">Živě</A>

Ostatní parametry nebudeme probírat, protože se s nimi prakticky nesetkáte. Příště se podíváme na to, jak lze do stránky vkládat obrázky, takže se jistě máte na co těšit.


Jak vytvářet www stránky - 8. díl

27. prosinec 1999 - Seriály

Obrázky

Jak by asi vypadaly internetové stránky bez grafiky? V některých případech možná dobře, ale většinou potřebujete návštěvníka něčím zaujmout, upoutat jeho pozornost, a k tomu právě slouží různé grafické prvky. Nikdy ale nezapomeňte, že příliš velké množství obrázků nejen že zpravidla snižuje přehlednost celé stránky, ale také podstatně zvyšuje dobu nutnou k přenosu této stránky (obzvláště při komutovaném připojení může být doba nutná k natažení markantně vyšší). Vždy se pokuste nejprve zamyslet nad tím, zda by stejného nebo podobného efektu nešlo dosáhnout použitím vhodně formátovaného písma, barvami pozadí či například tabulkami, které budeme probírat později.

Prvním podstatným krokem je volba vhodného formátu. Webové prohlížeče standardně podporují JPEG a GIF, pomalu se rozjíždí i PNG, který je v normě HTML 4.0 definován jako standard, nicméně některé starší prohlížeče si s ním neví rady. V současné době tedy doporučujeme zůstat u prvních dvou. Jaké jsou jejich vlastnosti a jaké jsou mezi nimi rozdíly:

GIF

  • Komprese: bezztrátová, tento formát se hodí například pro čárovou grafiku, screenshoty dialogových oken atp.
  • Barevná hloubka: omezená na 256 barev
  • Možnost transparentního pozadí: ano
  • Možnost animace: ano
Poznámka: uvedené vlastnosti se týkají formátu GIF 89

JPEG

  • Komprese: ztrátová, tento formát využívá nedokonalosti lidského zraku a "rozostřuje" některé části obrazu. Je vhodný především k publikování fotografií, naopak zcela nevhodný je v případech, že požadujete zcela přesnou grafiku.
  • Barevná hloubka: True color
  • Možnost transparentního pozadí: ne
  • Možnost animace: ne
Poté, co si vyberete, v jakém formátu budete obrázek prezentovat zbývá pouze vložit jej do HTML kódu stránky. To se provádí pomocí nepárového tagu IMG (image=obrázek). Jeho základní syntaxe vypadá následovně: <IMG SRC="obrazek">, kde obrazek je cesta k příslušnému grafickému souboru, kterou specifikujeme zcela stejně, jako v případě odkazů (viz. 6. díl našeho seriálu). Na rozdíl od odkazu ale není vhodné používat obrázky z jiných serverů - veškerou grafiku raději uložte na stejný server, na němž se nachází samotná stránka. Hlavním důvodem je, že při natahování stránky musí browser kontaktovat ještě další server, na němž máte uložený příslušný obrázek, čímž se o něco prodlouží doba nutná k jeho zobrazení. Navíc pokud tento server nebude fungovat (např. v důsledku nějakého výpadku), zobrazí se místo grafiky pouze značky symbolizující, že obrázek nelze nalézt, nebo není dostupný.

Tag IMG disponuje širokým množstvím parametrů, z nichž nejdůležitější jsou následující:

ALT="popisek obrazku" - parametr ALT určuje alternativní text, který:

  1. se zobrazí v případě, že má uživatel pomalý modem a z tohoto důvodu si vypnul zobrazení obrázků. Pomocí alternativního textu tak snadno pozná, co se nachází v které části stránky a důležité obrázky může ručně aktivovat přes pravé tlačítko myši v menu Zobrazit obrázek.
  2. Tento text také využívají textové browsery, na něž bychom neměli při vytváření www stránek nikdy zapomínat.
  3. Text uvedený v parametru ALT se v Internet Exploreru (a dalších prohlížečích) zobrazí v případě, že nad obrázkem zastavíte myší, v malém obdélníčku se žlutým pozadím. Můžete jej tedy použít i k popisu toho, co se na obrázku nachází.
  4. V blízké budoucnosti bude text uvedený v tomto parametru používán k zvukové navigaci na stránce pro uživatele s vadami zraku.
WIDTH="sirka v pixelech" a HEIGHT="vyska v pixelech" - tyto parametry určují, jaký prostor bude pro obrázek vyhrazen. Neuvedete-li je, natáhne prohlížeč nejprve text a teprve poté začne zobrazovat obrázky a upravovat pro ně potřebné místo. Během tohoto procesu veškerý text nepříjemně "poskakuje" a čtenář musí počkat, než se natáhnou obrázky, aby se mohl v klidu začíst.

Doporučujeme uvádět skutečnou velikost obrázku - určíte-li výšku a/nebo šířku větší, než odpovídá skutečnosti, bude obrázek zdeformován, pokud naopak tímto způsobem obrázek "zmenšíte", bude uživatel čekat na přenesení zbytečně velkého souboru, který pak následně prohlížeč transformuje.

Za naprosté minimum odpovídající všem normám lze tedy považovat obrázek, který je vložen následujícím způsobem:

<IMG SRC="../pictures/ja.jpg" ALT="tak toto je moje fotografie" WIDTH="100" HEIGHT="150">

Dalším důležitým atributem je zarovnání obrázku s textem, které se provádí pomocí parametru ALIGN. Ten může mít následující hodnoty:

  • ALIGN="left" obrázek je zarovnán na stránce vlevo, text ho obtéká z pravé strany.
  • ALIGN="right" obrázek je zarovnán na stránce vpravo, text ho obtéká z levé strany.
  • ALIGN="top" horní okraj obrázku je zarovnán s textem, zbývající text obrázek neobtéká, ale pokračuje až pod obrázkem
  • ALIGN="texttop" obvykle shodné s "top"
  • ALIGN="middle" střed obrázku je zarovnán se základnou textu, zbývající text obrázek neobtéká, ale pokračuje až pod obrázkem
  • ALIGN="absmiddle" střed obrázku je zarovnán se středem textu, zbývající text obrázek neobtéká, ale pokračuje až pod obrázkem
  • ALIGN="baseline" spodní okraj obrázku je zarovnán se základnou textu
  • ALIGN="bottom" - odpovídá parametru baseline
  • ALIGN="absbottom" - spodní okraj obrázku je zarovnán se základnou nejspodnější linky textu.
Abyste si to celé mohli lépe představit, vyzkoušejte si vytvořit stránku, na níž postupně vložíte obrázek se všemi uvedenými parametry.

Ostatní parametry zmíníme jen stručně, protože nejsou pro formát obrázku ani obtékání textu určující:

BORDER - šířka rámečku kolem obrázku určovaná v pixelech (implicitní je 0, tedy obrázek bez rámečku)

VSPACE a HSPACE - pokud je obrázek obtékán textem, můžete pomocí těchto parametrů definovat volný prostor kolem obrázku (text "přilepený" těsně na obrázek, jak jistě sami uznáte, nevypadá příliš dobře). Parametr VSPACE určuje volný prostor ve vertikálním směru (tj. pod a nad), HSPACE pak v horizontálním (tj. vlevo a vpravo). Hodnota se opět udává v pixelech.

To je tedy v kostce vkládání obrázků do www stránek. Grafiku můžete chytře využít ve spojením s hyperlinkovými odkazy například tak, že si vytvoříte grafické ovládací prvky (tlačítka, ikonky, ...), které budou fungovat jako odkaz. To provedete následujícím způsobem:

<A HREF="cesta k odkazovanému dokumentu"><IMG SRC="obrazek který bude sloužit jako odkaz" ALT="text který se zobrazí po najetí myší na obrázek" HEIGHT="výška obrázku" WIDTH="šířka obrázku"></A>

Pokud jste četli předchozí díl našeho seriálu, jistě jste poznali, že místo textu, který by se měl zobrazit jako hyperlinkový odkaz, je do tagu A vložen obrázek. Aby se odlišil od okolních obrázků, které například nemusí být současně odkazem na jiné soubory, má tento obrázek kolem sebe modrý rámeček. Pokud by vám tento rámeček kazil estetické ztvárnění vašich stránek, můžete jej jednoduše odstranit uvedením parametru BORDER=0 v tagu IMG.

Tolik tedy pro tento týden k obrázkům. Příště se podíváme na to, jak si můžete pohrát s textem. Do té doby si zkuste vytvořit nějakou stránečku s obrázkem, který bude fungovat jako odkaz na www.zive.cz :).


Jak vytvářet www stránky - 9. díl

3. leden 2000 - Seriály

Ve čtvrtém díle jsme si pověděli něco málo o formátování písma v HTML dokumentech. Pokud náš seriál sledujete od začátku, pak umíte tučné písmo, kurzívu, podtržené písmo a sedm dalších typů formátování. Jak ale například udělat barevný text, text určité velikosti, nebo text, který je napsaný jiným než standardním písmem? Toto umožňuje párový tag FONT, kterému věnujeme dnešní díl našeho seriálu.

Barva písma

Barvu písma určujeme parametrem COLOR, který může mít hodnotu v hexadecimálním tvaru (#rrggbb), nebo lze použít slovní označení. Barva se definuje stejně, jako barva pozadí stránky, což jsme si vysvětlovali ve třetím díle. Pro připomenutí si ale toto téma stručně zopakujeme:

Definování barvy názvem

Podporováno je následujících šestnáct barev:
Pojmenování | Hexadecimálně | Slovem | Ukázka
Černá | #000000 | BLACK |
Červená | #FF0000 | RED |
Žlutozelená | #00FF00 | LIME |
Žlutá | #FFFF00 | YELLW |
Modrá | #0000FF | BLUE |
Fuchsiová | #FF00FF | FUCHSIA |
Tyrkysová | #00FFFF | AQUA |
Bílá | #FFFFFF | WHITE |
Kaštanová | #800000 | MAROON |
Zelená | #008000 | GREEN |
Olivová | #808000 | OLIVE |
Námořnická modrá | #000080 | NAVY |
Tmavě fialová | #800080 | PURPLE |
Šedozelená | #008080 | TEAL |
Tmavě šedá | #808080 | GRAY |
Stříbrná | #C0C0C0 | SILVER |

Definování barvy hexadecimálně

Barvu definujeme pomocí hexadecimálního zápisu #rrggbb, který určuje poměr základních barev (červená-zelená-modrá). Pro každou barvu jsou určena dvě místa, takže celkem lze tímto způsobem definovat 16'581'375 barev.

Příklad:

Červený text tedy uvedeme tagem FONT s parametrem COLOR a hodnotou red, nebo #FF0000. V praxi to může vypadat následovně:

Toto je ukázka <FONT COLOR="red">červeného textu</FONT>

a zde vidíte výsledek

Toto je ukázka červeného textu

Nezapomínejte, že příliš mnoho barev písma na stránce návštěvníka rozptyluje, proto dávejte pozor, aby barev nebylo moc a aby se písmo dobře četlo. Berte ohled i na barvu pozadí - tmavě modré písmo se na černém pozadí nečte zrovna nejlépe...

Velikost písma

Dalším parametrem SIZE lze měnit velikost písma. Je možné použít několik způsobů, jak velikost písma definovat:

  1. Absolutní určení velikosti

    v tomto případě použijete jako hodnotu číslo mezi 1 a 7 (číslo 3 odpovídá standardní velikosti)

  2. Relativní určení velikosti

    velikost písma určujeme vzhledem k velikosti standardního textu. Znaménko + znamená, že písmo je větší než text standardní velikosti, znaménko - pak samozřejmě označuje písmo menší standardní text. Použijeme-li například parametr SIZE=+1, bude text uvnitř tagu FONT o jeden stupeň větší, než základní písmo. Při relativním určení velikosti smí parametr SIZE nabývat hodnot od -7 do +7.
Příklad:

Toto je normální písmo a <FONT SIZE=5>toto je písmo o velikosti 5</FONT>

výsledek vypadá takto:

Toto je normální písmo a toto je písmo o velikosti 5

Pokud použijete relativní určení velikosti, bude vše vypadat podobně:

Toto je normální písmo a <FONT SIZE=+2>toto je písmo o dva stupně větší</FONT>

výsledek vypadá takto:

Toto je normální písmo a toto je písmo o dva stupně větší

Poznámka: Pojmem standardní velikost máme na mysli velikost běžného písma prohlížeče (obvykle 3 nebo 4). Chcete-li změnit tuto hodnotu, použijte tag <BASEFONT SIZE=standardni velikost>. V takovém případě se bude velikost písma určená relativně odvozovat od velikosti uvedené v BASEFONT.

Typ písma

Posledním parametrem tagu FONT je FACE, který určuje font, jímž bude text zobrazen. Hodnotou parametru je název písma, které má být použito (název písma musí být zcela přesný!). Nevýhodou je, že pokud návštěvník vašich stránek nemá příslušné písmo nainstalované, zobrazí se text standardním fontem, což může v některých případech úplně změnit celé formátování stránky. Tato nežádoucí vlastnost se dá obejít uvedením alternativních písem, které mají být použity v případě, že první uvedené písmo návštěvník nemá (těchto písem je možné uvést neomezené množství, obvykle se uvádějí dvě až čtyři). Každopádně se doporučuje nepoužívat písma, která má nainstalována minoritní skupina uživatelů (např. písma Adobe Type). Pokuste se vystačit s písmy Arial, Times New Roman a Courier.

Příklad:

<FONT FACE="Courier New, Comic Sans MS">Tento text bude zobrazen písmem Courier New. V případě, že návštěvník nemá nainstalované písmo Courier New, bude pro zobrazení použito písmo Comic Sans MS </FONT>.

Výsledek:

Tento text bude zobrazen písmem Courier New. V případě, že návštěvník nemá nainstalované písmo Courier New, bude pro zobrazení použito písmo Comic Sans MS

Tag FONT lze kombinovat s dalšími tagy pro formátování písma, proto můžete například udělat tučné červené písmo.

<B><FONT COLOR="red">Tučné červené písmo</FONT></B>

ukázka:

Tučné červené písmo

Dávejte ale pozor na správné uzavírání tagů (to platí nejen pro tag FONT, ale obecně pro všechny tagy podporující vnořování). Například <B><FONT COLOR="red">Tučné červené písmo</B></FONT> zobrazí sice MS Internet Explorer správně, nicméně jedná se o syntakticky chybný zápis, který mohou jiné prohlížeče interpretovat odlišným způsobem.

Pro dnešek, myslím, stačilo. V příští lekci se podíváme na velice zajímavé téma - tabulky. Možná se budete sami divit, k čemu se dá tento útvar využít. Do té doby si můžete procvičovat formátování písma.


Jak vytvářet www stránky - 10. díl

10. leden 2000 - Seriály

Tabulky

Jak jsem slíbil v minulém díle, budeme se dnes věnovat poněkud náročnějšímu tématu - tabulkám. Protože toto téma je poněkud obsáhlejší, budeme se mu věnovat i v příštích dílech našeho seriálu.

K vytvoření jednoduché tabulky vystačíte se třemi párovými tagy - TABLE, TR a TD. Tag TABLE označuje začátek (resp. jeho uzavírací část konec) tabulky, tag TR začátek/konec řádku a tag TD začátek/konec buňky. Jak jste si možná všimli, neobsahuje HTML žádný tag pro definování sloupce - tabulky se totiž definují po řádcích a vlastnosti sloupců se nastavují buď automaticky (tj. odvodí se na základě vlastností jednotlivých buněk), nebo je můžete ovlivnit přímo patřičným nastavením parametrů buněk.

Jednoduchá tabulka se třemi řádky a třemi sloupci by tedy mohla vypadat následovně:

<TABLE>
<TR><TD>zboží</TD><TD>rok 1998</TD><TD>rok 1999</TD></TR>
<TR><TD>jablka</TD><TD>10'000 ks</TD><TD>12'000 ks</TD></TR>
<TR><TD>hrušky</TD><TD>7'500 ks</TD><TD>8'000 ks</TD></TR>
</TABLE>

Výsledek bude vypadat následovně:

zboží | rok 1998 | rok 1999
jablka | 10'000 ks | 12'000 ks
hrušky | 7'500 ks | 8'000 ks

První, čeho si všimnete (používáte-li MS Internet Explorer) je, že tabulka je zobrazena bez mřížky. Ve skutěčnosti zde sice mřížka je, ale má nulovou šířku, takže jí budete muset nastavit. K tomu slouží parametr border, který umístíte do elementu TABLE (naříklad <TABLE border=2>). Na tento parametr byste neměli zapomínat, protože v případě jeho vynechání zobrazují některé prohlížeče tabulku s mřížkou různé šířky (Netscape Navigator například používá šířku mřížky 2).

Jak sami jistě uznáte, že ani poté nevypadá tabulka přiliš pěkně. Možná by stálo za to, zvýraznit záhlaví. K tomu slouží párový tag TH, kterým nahradíte tag TD všude tam, kde chcete odlišit obsah buňky od ostatních (ve většině prohlížečů je text v takto definované buňce odlišen tučným písmem a zarovnáním na střed). Obecně se tento tag používá pro záhlaví tabulky. Syntaxe tagu TH je zcela shodná s tagem TD.

Teď už je to o něco lepší, ale položky označující počet kusů ovoce by lépe vypadaly, kdyby byly zarovnané k pravému okraji buňky. Ani to není problém: stačí použít parametr align v tagu TD. Tento parametr může mít hodnotu left (zarovnání k levému okraji), center (zarovnání na střed) nebo right (zarovnání k pravému okraji). Buňky s čísly tedy upravíme následovně: <TD align="right">.

Parametr align můžeme použít nejen v tagu TD, kde určuje zarovnání obsahu buňky, ale i v tagu TR či TABLE. V prvním případě se nastavuje zarovnání všech buněk v řádku, v druhém případě pak volíte umístění tabulky vzhledem k okrajům stránky. Je důležité si zapamatovat, že určující je vždy parametr menšího segmentu tabulky, to znamená, že necháte-li všechny buňky v řádku zarovnat doleva a jednu nebo více buněk tohoto řádku zarovnáte doprava, má definice zarovnání příslušných buněk přednost před definicí celého řádku. Nejlépe si to můžete ověřit na následujícím příkladě:

<TABLE border=2>
<TR><TH>kov</TH><TH>příjem</TH><TH>výdej</TH></TR>
<TR align="right"><TD align="left">zlato</TD><TD>150 g</TD><TD>140 g</TD></TR>
<TR align="right"><TD align="left">stříbro</TD><TD>675 g</TD><TD>680 g</TD></TR>
</TABLE>

Bunky ve druhém a třetím řádku budou zarovnané na pravý okraj, ovšem buňky v prvním sloupci mají nastaveno zarovnání k levému okraji a protože buňka je menší segment, než řádek (viz. naše definice výše), bude jejich obsah zarovnán doleva. Buňky ve druhém a třetím sloupci nemají nastaveno žádné zarovnání, takže převezmou zarovnání, které platí pro celý řádek.

Zde vidíte výsledek:

kov | příjem | výdej
zlato | 150 g | 140 g
stříbro | 675 g | 680 g

Velice podobný je parametr valign, který můžete použít v tagu TR a TD, nikoli ovšem v TABLE. Na rozdíl od parametru align, který určuje jak bude obsah buňky umístěn v horizontálním směru, používáme valign pro umístění obsahu buňky ve vertikálním směru. Tento parametr může mít následující hodnoty:

  • top - obsah buňky je zarovnán k jejímu hornímu okraji
  • middle - obsah buňky je zarovnán na střed (pozor, mnoho tvůrců webových stránek se dopuští chyby a používá center, což je v tomto případě nepřípustná hodota)
  • bottom - obsah buňky je zarovnán k dolnímu okraji
  • baseline - zarovnání na společnou základnu
Tak, tabulku máme orámečkovanou, hlavičku zvýrazněnou, text je zarovnaný jak má být, co dál? Určitě bude celá tabulka vypadat lépe, když jí vyvedeme v barvách. Dnes zůstaneme pouze u barvy pozadí, kterou nastavujeme parametrem bgcolor (pokud jste četli předchozí lekci, můžete si pomocí tagu FONT obarvit i písmo). Syntaxe je zcela stejná, jako ve všech případech, kdy v HTML určujeme barvu - lze tedy použít buď slovního vyjádření, nebo hexadecimálního zápisu. Parametr bgcolor můžeme použít jak v tagu TABLE (určíme barvu pozadí pro celou tabulku), tak i v tagu TR (barva pozadí pro celý řádek) a TD (barva pozadí pro jednu buňku).

Vytvoříme si tabulku, v níž aplikujeme většinu věcí, které jsme se dnes naučili:

<TABLE border=2 bgcolor="#EFCC03" align="center">
<TR bgcolor="#EBE125"><TH>Hardware</TH><TH>1997</TH><TH>1998</TH><TH>1999</TH></TR>
<TR align="right"><TD align="left">Klávesnice</TD><TD>11</TD><TD>15</TD><TD bgcolor="#EDDE74">37</TD></TR>
<TR align="right"><TD align="left">Myši</TD><TD>39</TD><TD>30</TD><TD bgcolor="#EDDE74">83</TD></TR>
<TR align="right"><TD align="left">Tablety</TD><TD>40</TD><TD bgcolor="#EDDE74">59</TD><TD>48</TD></TR>
<TR align="right"><TD align="left">Scannery</TD><TD>22</TD><TD bgcolor="#EDDE74">73</TD><TD>33</TD></TR>
<TR align="right" bgcolor="#C0C0C0"><TD align="left">Celkem</TD><TD>2110</TD><TD>2175</TD><TD>2226</TD></TR>
</TABLE>

Zde vidíte výsledek. Pro porovnání srovnejte tuto tabulku s tou, kterou jsme si vytvořili na začátku dnešního dílu - rozdíl je více než patrný.

Hardware | 1997 | 1998 | 1999
Klávesnice | 11 | 15 | 37
Myši | 39 | 30 | 83
Tablety | 40 | 59 | 48
Scannery | 22 | 73 | 33
Celkem | 2110 | 2175 | 2226

Na závěr si stručně zopakujeme tagy a jejich parametry, které byste již měli ovládat

  • TABLE - definuje začátek a konec tabulky
    • border - šířka mřížky
    • align - zarovnání tabulky vzhledem ke krajům stránky
    • bgcolor - barva pozadí celé tabulky
  • TR - definuje začátek a konec řádku
    • align - horizontální zarovnání obsahu buněk na celém řádku
    • valign - vertikální zarovnání obsahu buněk na celém řádku
    • bgcolor - barva pozadí všech buněk na řádku
  • TD - definuje začátek a konec buňky (event. TH - buňka záhlaví)
    • align - horizontální zarovnání obsahu buňky
    • valign - vertikální zarovnání obsahu buňky
    • bgcolor - barva pozadí buňky
To je pro dnešek vše. Do příštího týdne si zkuste vytvořit vlastní tabulky, formátujte je, měňte barvy a zkuste si různé způsoby zarovnání. Příště si představíme další parametry, s jejichž pomocí můžete dosáhnout ještě efektněji vyhlížejících tabulek.


Jak vytvářet www stránky - 11. díl

17. leden 2000 - Seriály

V minulém díle jsme si vysvětlili, že k vytvoření tabulky vystačíme se třemi základními tagy - TABLE, TR a TD. Zmínili jsme také některé parametry, s jejichž pomocí je možné určit zarovnání obsahu buňky, barvy či třeba šířku mřížky. Dnes se budeme věnovat teorii a podíváme se podrobně na všechny parametry, které můžete při tvorbě tabulek potřebovat.

Tag TABLE

  • align - zarovnání tabulky vzhledem k okrajům stránky. Tento parametr může nabývat hodnot left (doleva), right (doprava) nebo center (na střed).
  • bgcolor - barva pozadí buněk celé tabulky.
  • border - tento parametr se používá k určení šířky rámečku celé tabulky. Je nutné jej uvádět i v případě, že chcete tabulku zobrazit bez mřížky, protože některé prohlížeče, v případě opomenutí tohoto parametru, dosazují vlastní šířku.
  • cellpadding - specifikuje vzdálenost obsahu buňky od okraje mřížky. Implicitní hodnota je 1.
  • cellspacing - specifikuje vzdálenost mezi jednotlivými buňkami tabulky. Implicitní hodnota je 2.
  • frame - určuje, která část vnějšího rámečku tabulky bude zobrazena. K dispozici jsou následující hodnoty:
    • void - tabulka bez rámečku
    • above - pouze horní okraj
    • below - pouze dolní okraj
    • hsides - horní a dolní okraj
    • vsides - levý a pravý okraj
    • lhs - pouze levý okraj
    • rhs - pouze pravý okraj
  • rules-určuje, které části mřížky budou zobrazeny uvnitř tabulky
    • none - žádná mřížka nebude zobrazena
    • groups - mřížka bude zobrazena pouze u skupin řádek a skupin sloupců definovaných tagy THEAD, TFOOT, TBODY, COLGROUP a COL (o nich si povíme v další lekci)
    • rows - zobrazí mřížku pouze mezi řádky
    • cols - zobrazí mřížku pouze mezi sloupci
    • all - zobrazí celou vnitřní mřížku
  • width - určuje šířku celé tabulky. Udává se v pixelech (např. width=550), nebo v procentech aktuální šířky stránky (např. width=95%). Druhý případ má tu výhodu, že se tabulka přizpůsobí aktuálnímu rozlišení a velikosti okna browseru návštěvníka. V případě, že tento parametr vynecháte, nebo nastavíte příliš nízkou hodnotu, vypočítá si jej prohlížeč sám na základě součtu šířek nejširších buněk v každém sloupci.
  • summary - základní informace o účelu a struktuře tabulky, které využijí především nevidomí uživatelé využívající browsery využívající hlasu nebo Braillova písma.

Tag TR

  • align - určuje horizontální zarovnání obsahů buněk v řádku (left=doleva, right=doprava, center=na střed)
  • valign - určuje vertikální zarovnání obsahů buněk v řádku (top=k hornímu okraji, middle=na střed, bottom=dolů, baseline=text je zarovnán na společnou základnu)
  • bgcolor - barva pozadí buněk v řádku

Tag TH a TD

  • align - horizontální zarovnání obsahu buňky (hodnoty jsou stejné jako u tagu TR)
  • axis - pojmenování obsahu buňky (má využití zejména v databázových aplikacích, které odkazují na buňku jménem)
  • bgcolor - barva pozadí buňky
  • collspan - určuje, přes kolik sloupců se buňka rozprostírá (tomuto tématu se budeme věnovat v příští lekci)
  • height - výška buňky. Opět se určuje buď v pixelech, nebo relativně v procentech. Zvolíte-li procentuální zadání, vztahuje se tato hodnota k výšce aktuálního okna prohlížeče. Výška nejvyšší buňky určuje výšku celého řádku, není tedy nutné určovat výšku u každé buňky zvlášť.
  • nowrap - nemá žádnou hodnotu. Zapsání tohoto parametru určuje, že obsah buňky nesmí být zalomen na více řádků.
  • rowspan - určuje, přes kolik řádků se buňka rozprostírá (více v příští lekci)
  • valign - vertikální zarovnání obsahu buňky (hodnoty jsou stejné jako u tagu TR)
  • width - šířka buňky. Určuje se buď v pixelech, nebo v procentech relativně k šířce tabulky. Určíme-li například v tagu TABLE šířku tabulky na 500 pixelů, způsobí parametr width="10%", že buňka bude široká 50 pixelů.
V některých učebnicích HTML se můžete setkat s řadou dalších parametrů, ale ty nejsou uvedeny v normě HTML 4.0, takže je mohou různé prohlížeče zobrazovat různým způsobem, nebo je prostě mohou ignorovat.

Pro tento týden, myslím, stačí. Příště se podíváme na to, jak se dají formátovat sloupce, jak se sdružují části tabulky do celků, či jak například můžete spojit několik buněk v tabulce dohromady.


Jak vytvářet www stránky - 12. díl

24. leden 2000 - Seriály

V minulém díle jsme se zaměřili trochu více na teorii, které se budeme věnovat i dnes, a pak si ukážeme, jak můžete tabulky prakticky využít při formátování www stránek.

Jaké tagy tedy ještě můžete v tabulkách použít:

Tag CAPTION

Tento párový tag, určující titulek tabulky, lze zapsat výhradně za tag TABLE. Umístění nadpisu definujete parametrem align, který může mít hodnoty:
  • top - nadpis je umístěn nad tabulkou
  • bottom - nadpis je umístěn pod tabulkou
  • left - nadpis je umístěn vlevo od tabulky
  • right - nadpis je umístěn vpravo od tabulky

Tagy THEAD, TBODY a TFOOT

Tyto tagy jsou podporované od HTML 4.0 a jejich význam spočívá v rozdělení tabulky do logických sekcí. Sekce THEAD specifikuje hlavičku tabulky, TBODY samotnou tabulku a TFOOT patičku. Pokud se rozhodnete pro tento způsob definování tabulky, pak mějte na paměti, že tyto tagy se zapisují v pořadí hlavička - patička - tabulka (nebo tabulky). Tabulka by podle nové normy měla vypadat následujícím způsobem:

<TABLE>
<THEAD>
<TR> hlavička tabulky
</THEAD>
<TFOOT>
<TR> patička tabulky
</TFOOT>
<TBODY>
<TR> první řádek první části tabulky
<TR> druhý řádek první části tabulky
</TBODY>
<TBODY>
<TR> první řádek druhé části tabulky
<TR> druhý řádek druhé části tabulky
<TR> třetí řádek druhé části tabulky
</TBODY>
</TABLE>

Všechny tyto tagy dovolují definovat vlastnosti vybrané oblasti.

  • align - horizontální zarovnání textu.
  • valign - vertikální zarovnání textu.
  • char - znak, na který bude text v buňce zarovnán (např.: char="," zarovná všechny buňky v dané oblasti na desetinou čárku).
  • charoff - odsazení znaku specifikovaného v atributu char.

Tagy COLGROUP a COL

Zatímco k horizontálnímu rozdělení tabulky na logické celky slouží tagy THEAD, TFOOT a TBODY, k vertikálnímu dělení se používají tagy COLGROUP a COL, které je nutné zařadit ještě před první řádek tabulky.

Zjednodušeně řečeno - COLGROUP spojuje sloupce, které spolu logicky souvisejí, do větších celků, tag COL pak využijeme k jemnějšímu definování vlastností sloupců (často se používá pouze tag COLGROUP, který k definování sloupců plně postačuje).

U obou tagů lze definovat vlastnosti pro několik sloupců současně, k čemuž slouží atribut span, který prohlížeči říká, na kolik sloupců se příslušné nastavení vztahuje.

Kromě zarovnávacích parametrů, které jsme si vysvětlili u předchozích tagů, lze v tomto tagu pomocí atributu width nastavit ještě šířku sloupců.

Použití tagu COLGROUP si nejlépe vysvětlíme na příkladu

<TABLE border=1>
<COLGROUP span=1 align="left" width=100><COLGROUP span=3 align="right" width=75>
<TR align="center"><TH>Zboží</TH><TH>říjen</TH><TH>listopad</TH><TH>prosinec</TH></TR>
<TR><TD>jablka</TD><TD>10</TD><TD>20</TD><TD>15</TD></TR>
<TR><TD>hrušky</TD><TD>15</TD><TD>25</TD><TD>35</TD></TR>
<TR><TD>pomeranče</TD><TD>5</TD><TD>5</TD><TD>5</TD></TR>
<TR><TD>citróny</TD><TD>16</TD><TD>18</TD><TD>20</TD></TR>
</TABLE>

Jak můžete poznat ze zdrojového kódu, bude text v prvním sloupci zarovnán doleva a tento sloupec bude široký 100 pixelů, zbývající tři sloupce budou zarovnány doprava a budou široké 75 pixelů. Výjimkou je obsah buněk v prvním řádku, který je diky parametru align="center" v tagu TR vycentrován.

Výsledek vypadá následovně:

Zboží | říjen | listopad | prosinec
jablka | 10 | 20 | 15
hrušky | 15 | 25 | 35
pomeranče | 5 | 5 | 5
citróny | 16 | 18 | 20

Slučování buněk

HTML umožňuje slučování buněk z více řádků a/nebo sloupců do jedné buňky. K tomu slouží atributy colspan a rowspan, jež můžete zapsat do tagu TH nebo TD. Hodnota těchto atributů udává, přes kolik řádek a/nebo sloupců se buňka rozkládá. Je možné použít jeden nebo oba atributy - v druhém případě se buňka bude rozkládat přes více řádků i více sloupců. Místo dlouhého popisu bude lepší použít názorný příklad:

<TABLE border="1">
<TR><TH rowspan="2">&nbsp;</TH><TH colspan="2">Průměr</TH><TH rowspan="2">Hnědé oči</TH></TR>
<TR><TH>váha</TH><TH>výška</TH></TR>
<TR><TH>muži</TH><TD>75</TD><TD>182</TD><TD>40%</TD></TR>
<TR><TH>ženy</TH><TD>60</TD><TD>170</TD><TD>43%</TD></TR>
</TABLE>

Výsledek vypadá takto:

 | Průměr |  | Hnědé oči
 | váha | výška
muži | 75 | 182 | 40%
ženy | 60 | 170 | 43%

Poznámka: V tabulkách není vhodné definovat prázdné buňky stylem <TD></TD> ani <TD> </TD> (tedy s mezerou), neboť takové buňky nezobrazí všechny prohlížeče shodně. Použijte raději neviditelnou mezeru &nbsp;, která zajistí, že prázdná buňka bude vždy zobrazena korektně.

Využití tabulek

Tabulky můžete využít především k přesnému umístění textu a grafiky na stránku. Budete-li například chtít, aby text začínal 100 pixelů od levého okraje stránky a končil 150 pixelů od pravého okraje, je nejlepším způsobem vytvořit si tabulku s nulovou šířkou rámečků. Důležité je v tomto případě nezapomenout nastavit šířku tabulky na 100% šířky stránky.

<TABLE border=0 width=100%>
<TR><TD width=100>nbsp;</TD><TD>sem přijde vlastní text</TD><TD width="150> </TD></TR>
</TABLE>

Další způsob využití tabulky je vytvoření ovládacích prvků, u kterých záleží na přesném umístění. Například vodorovnou navigační lištu lze vytvořit tímto způsobem.

<TABLE border=0 width=100%>
<TR><TD width=10% align="center"><a href="odkaz1.htm">popis1</A></TD><TD width=10% align="center"><a href="odkaz2.htm">popis2</A></TD><TD width=10% align="center"><a href="odkaz3.htm">popis3</A></TD>... ... <TD width=10% align="center"><a href="odkaz9.htm">popis9</A></TD><TD width=10% align="center"><a href="odkaz10.htm">popis10</A></TD></TR>
</TABLE>

Díky tomu, že jsme nepoužili absolutní ale procentuální určení šířky buněk, bude při libovolném rozlišení ovládací lišta zabírat celou šíři obrazovky a jednotlivé ovládací prvky budou vždy stejně široké.

V případě, že se místo prostých textových odkazů rozhodnete použít jako odkaz obrázek, můžete pomocí tabulek vytvořit například obrázkovou mapu složenou z několika částí, které budou odkazovat na různé objekty. V takovém případě doporučujeme určovat nejen velikost jednotlivých buněk, ale i samotných obrázků - zajistíte tím rychlejší zobrazení stránky v prohlížeči.

Využití tabulek při navrhování vzhledu stránek je skutečně široké - stačí se podívat na zdrojové kódy stránek několika serverů. Uvidíte, že ačkoli jednotlivé weby vypadají zcela odlišně, v drtivé většině případů jsou stránky tvořeny tabulkami.


Jak vytvářet www stránky - 13. díl

31. leden 2000 - Seriály

Formuláře

Dosud jsme se věnovali pouze tomu, jak předat informace návštěvníkům stránek, tedy směrem od vás. Důležitým prvkem Internetu je ale komunikace a to komunikace obousměrná. Je sice pěkné, když budete moci sdělit svůj názor, ovšem bylo by více než dobré, kdybyste umožnili sdělit názor i vašim čtenářům. K tomu existuje několik způsobů jako například diskuzní fóra, knihy návštěv nebo formuláře. Právě poslední zmíněný způsob bude tématem tohoto dílu našeho seriálu

Formulář

Celý formulář je uložen mezi tagy <FORM> a </FORM>, přičemž tento tag má několik důležitých parametrů:
  • action - určuje adresu skriptu (zpravidla se jedná o CGI, PHP nebo ASP skript), který formulář zpracuje. Protože formuláře lze odesílat i prostřednictvím elektronické pošty (to využijí zejména webmasteři, kteří mají své stránky na free webohostingových serverech, na nichž není používání skriptů povoleno), můžete jako hodnotu atributu action uvést e-mailovou adresu, na kterou bude formulář odeslán.
  • method - tento atribut může mít hodnotu get nebo post. První jmenovaný je vhodný zejména v případě, že data z formuláře nevyžadují žádné vnější zpracování. Dobrým příkladem je vyhledávání v databázích. V ostatních případech se nastavte parametr method na post (vhodné například pro doplňování nějaké internetové databáze). Při použití metody get se data z formuláře připojují k URL adrese volaného skriptu, u metody post jsou odesílána přímo v HTTP.
  • enctype - způsob kódování odesílaných dat. Budete-li data získávat pomocí elektronické pošty, je patrně nejlepší volba text/plain.
Protože většina čtenářů bude patrně používat k získání vyplněných dat e-mail, uvádíme základní stavbu tagu FORM pro tento způsob:

<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.cz" method="post">
.
.
.
vlastní formulář
.
.
.
</FORM>

Základní ovládací prvky

Nyní přeskočíme na konec formuláře, kam se zpravidla umísťují základní ovládací prvky umožňující odeslání vyplněných dat nebo smazání celého formuláře. Základním stavebním kamenem většiny položek formuláře je tag INPUT, který sám o sobě prakticky nic neznamená, ovšem o něco dále pochopíte, že bez tohoto elementu se při vytváření formulářů neobejdete. Až parametr type určuje v co se dotyčná položka promění. Pro odesílací tlačítko má tento parametr hodnotu submit, pro vymazání formuláře pak reset.

Zdrojový kód jednoduchého tlačítka pro odeslání dat by tedy mohl vypadat takto:

<INPUT type="submit" value="Odešli data!">

V případě, že uživatel stiskne toto tlačítko, předají se data z formuláře na adresu zadanou v parametru action úvodního tagu FORM.

Zapomínat byste neměli ani na možnost, že uživatel bude chtít celý formulář smazat a vyplnit znovu. Zdrojový kód tlačítka, které mu toto umožní, vypadá následovně:

<INPUT type="reset" value="Smaž formulář!">

Stisk tohoto tlačítka způsobí uvedení všech položek formuláře do výchozího stavu.

Textové pole

Textové pole využijete například pro zadávání údajů jako jsou e-mailová adresa, telefon, jméno, příjmení, slova k vyhledávání atp. Opět se používá tag INPUT, tentokrát s parametrem type=text. K dispozici je několik dalších atributů, které dovolují definovat textové pole:
  • name - jméno vstupního prvku. Toto jméno se používá při zpracování formuláře skriptem a velmi důležité je jeho určení v případě, kdy jsou data z formuláře odesílána elektronickou poštou. V takovém případě vám pak přijde zpráva, která má strukturu jmeno vstupního prvku=uživatelem zvolená nebo vyplněná hodnota. Pamatujte si, že každé jméno by mělo v jednom formuláři použito pouze jedenkrát (výjimkou jsou skupiny zaškrtávacích políček a přepínacích tlačítek). Parametr name se uvádí u všech elementů INPUT ve formuláři.
  • value - zde můžete vyplnit předem definovanou odpověď, kterou může uživatel změnit (např. parametr value="sem napište svůj e-mail" způsobí, že po načtení formuláře bude v textovém poli již vepsán text sem napište svůj e-mail.
  • size - vizuální velikost textového pole, v tomto případě se udává v počtu písmen, které budou v poli viditelné.
  • maxlength - skutečná velikost textového pole určující kolik písmen je možné maximálně zadat. Pokud je parametr maxlength větší než size, bude při zápisu text odsouván "mimo" textové pole.
  • accesskey - klávesová zkratka, která přesune kurzor do vybraného textového pole. Použijete-li například parametr accesskey="k", bude kurzor po stisku kláves Alt+K přesunut právě do tohoto textového pole. Jestliže klávesová zkratka ve formuláři koliduje s některou z klávesových zkratek prohlížeče, má přednost zkratka ve formuláři.
  • align - zarovnání textového pole (pokud jste četli předchozí díly našeho seriálu, jistě nemusím vysvětlovat hodnoty left, center a right).
  • readonly - tento parametr nemá žádnou hodnotu, jeho uvedení v tagu INPUT způsobí, že příslušné textové pole sice bude viditelné, nicméně uživatel nebude mít žádnou možnost změnit jeho hodnotu.
Jak takové textové pole může vypadat vidíte v následující ukázce:

Adresa: <INPUT type="text" name="adresa" value="vyplňte, prosím, svou adresu" size=30 maxlength=45 accesskey="a" align="left">

Ukázka:

Adresa:

Pole pro vstup hesla

Ukázali jsme si textové pole, ale jak například zajistíte, aby při zadání hesla do takového pole nemohl toto heslo přečíst kolega, který vám bude stát za zády? Od toho je tu pole pro vstup hesla, které je naprosto identické s polem pro zadání textu, rozdílem je, že se na obrazovce uživatele nezobrazují zapsané znaky, ale pouze hvězdičky. Jediným rozdílem proti textovému poli je parametr type, který musí mít hodnotu password, všechny ostatní atributy jsou zcela shodné, proto je zde nebudeme znovu rozebírat.

Dovoluji si ale upozornit, že ačkoli se pole tváří jako bezpečné, může být heslo odhaleno. Velice jednoduché je to v případě, že je formulář odesílán elektronickou poštou - stačí se jen podívat do odeslané pošty a uvidíte zde heslo v plné kráse. Ani jiné způsoby nejsou bez rizika a za patrně nejbezpečnější je považován protokol HTTPS.

Zdrojový kód pole k zadání hesla může tedy vypadat takto:

Heslo: <INPUT type="password" name="uzivheslo" size=20 maxlength=45 accesskey="a" align="left">

Zkuste si něco napsat do následujícího políčka a uvidíte, v čem je rozdíl:

Heslo:

Na závěr si zkusíme vytvořit jednoduchý formulář, který bude odesílán elektronickou poštou a bude obsahovat jméno, příjmení, adresu a uživatelské heslo:

<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.cz" method="post">
Jméno: <INPUT type="text" name="jmeno" value="" size=15 maxlength=30 align="left"><BR>
Příjmení: <INPUT type="text" name="prijmeni" value="" size=15 maxlength=30 align="left"><BR>
Adresa: <INPUT type="text" name="adresa" value="" size=30 maxlength=45 align="left"><BR>
Heslo: <INPUT type="password" name="heslo" size=20 maxlength=30 align="left"><BR>
<INPUT type="submit" value="Odešli data!"><INPUT type="reset" value="Smaž formulář!">
</FORM>

Po zobrazení v prohlížeči bude formulář vypadat takto:

Jméno:
Příjmení:
Adresa:
Heslo:

Zatím to sice není nic moc, ale příště se naučíme další kouzla s formuláři, takže se jistě máte na co těšit.


Jak vytvářet www stránky - 14. díl

7. únor 2000 - Seriály

Formuláře - pokračování

V minulém díle jsme si ukázali několik základních prvků potřebných k vytvoření formuláře. Dnes budeme v tomto tématu pokračovat a povíme si o dalších prvcích, které je možné ve formulářích použít.

Zaškrtávací pole

Zaškrtávací pole, nebo také zatržítko, je vhodné použít zejména u dotazů, na něž může uživatel odpovědět více způsoby, nebo u dotazů, na které lze odpovědět stylem "ano" (políčko je zaškrtnuté) nebo "ne" (políčko není zaškrtnuté). Definuje se, jak již víme z minulého dílu, tagem INPUT, jehož parametr type má tentokrát hodnotu chceckbox. Využitelné jsou zejména následující atributy:
  • name - název pro skupinu zaškrtávacích políček (například dotazujete-li se na oblíbenou příchuť zmrzliny, můžete pro tento účel použít název zmrzlina). Všechna políčka patřící do stejné skupiny musí mít hodnotu parametru name stejnou!
  • value - hodnota, která je předána skriptu v případě, že uživatel políčko "zaškrtne" (zůstaneme-li u našeho příkladu se zmrzlinou, vložíte do parametru value například hodnoty jahodova, cokoladova, vanilkova atp.). V případě, že formulář bude odesílán elektronickou poštou, obdrží příjemce jako výsledky všechna zaškrtnutá políčka ve formátu name=value.
  • checked - uvedení tohoto parametru určuje, že vybrané políčko bude při načtení formuláře implicitně "zaškrtnuté", což je vhodné zejména v případech, kdy předpokládáte, že většina uživatelů toto políčko "zaškrtne" (například pokud budete předpokládat, že většina lidí má ráda čokoládovou zmrzlinu, použijete tag <INPUT type="checkbox" name="zmrzlina" value="cokoladova" checked>).
  • align - zarovnání políčka na stránce (shodné jako u předcházejících tagů, tedy left, right nebo center).
Ukažme si tedy, jak vytvořit jednoduchý formulář, jehož účelem bude zjistit, jaké deníky čtou návštěvníci našich stránek:

<B>Které deníky čtete pravidelně?</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.cz" method=post>
<INPUT type="checkbox" name="deniky" value="mladafronta" chcecked>Mladá Fronta DNES<BR>
<INPUT type="checkbox" name="deniky" value="blesk">Blesk<BR>
<INPUT type="checkbox" name="deniky" value="pravo">Právo<BR>
<INPUT type="checkbox" name="deniky" value="hn">Hospodářské noviny<BR>
<INPUT type="checkbox" name="deniky" value="ln">Lidové noviny<BR>
<INPUT type="checkbox" name="deniky" value="dalsi">Další deníky<BR>
<INPUT type="submit" value="Odešli data!"><INPUT type="reset" value="Smaž formulář!"> <BR>
</FORM>

Výsledek pak bude vypadat následovně:

Které deníky čtete pravidelně?

Mladá Fronta DNES
Blesk
Právo
Hospodářské noviny
Lidové noviny
Další deníky

Přepínací pole

Přepínací pole nebo "radio-button". Původní anglický název tohoto formulářového prvku vzešel z principu starých rádií, kde byla tlačítka pro přepínání vlnových délek, přičemž nikdy nebylo možné mít stisknuté více než jedno tlačítko (v případě, že jste stiskli jiné, to předchozí "vyskočilo"). Přesně tak fungují přepínací pole ve formulářích - nikdy nelze zvolit více než jednu jedinou odpověď, takže se tyto prvky hodí zejména pro otázky typu "co je nejlepší..." a jistě sami najdete řadu dalších uplatnění. Syntaxe je shodná se zaškrtávacími políčky, liší se pouze v tom, že parametr type má hodnotu radio. Nebudeme tedy podrobně rozebírat jak tento tag zapsat a podíváme se rovnou na příklad.

<B>Který deník považujete za nejlepší?</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.cz" method=post>
<INPUT type="radio" name="deniky" value="mladafronta" chcecked>Mladá Fronta DNES<BR>
<INPUT type="radio" name="deniky" value="blesk">Blesk<BR>
<INPUT type="radio" name="deniky" value="pravo">Právo<BR>
<INPUT type="radio" name="deniky" value="hn">Hospodářské noviny<BR>
<INPUT type="radio" name="deniky" value="ln">Lidové noviny<BR>
<INPUT type="radio" name="deniky" value="dalsi">Jiný deník<BR>
<INPUT type="submit" value="Odešli data!"><INPUT type="reset" value="Smaž formulář!"><BR>
</FORM>

Všimněte si, že nelze aktivovat více než jednu položku

Který deník považujete za nejlepší?

Mladá Fronta DNES
Blesk
Právo
Hospodářské noviny
Lidové noviny
Jiný deník

V dokumentu lze definovat více skupin přepínacích polí, vždy si ale dávejte pozor na název - tlačítka se stejnou hodnotou parametru name se vzájemně ovlivňují a jak jsem uvedl výše, není možné, aby bylo aktivní více než jedno. Při použití více skupin (například budete-li mít více otázek, na které chcete nabídnout jen jedinou odpověď) je nutné, aby každá skupina měla svůj vlastní název, tedy name.

Skrytý prvek

Skrytý prvek vám umožňuje odesílat ke zpracování data, která nejsou viditelná a nevyplňuje je uživatel (například máte-li více formulářů, lze do tohoto prvku zadat název formuláře, který uživatel vyplnil). Parametr type má hodnotu hidden, atributy jsou tentokrát důležité jen dva: name, kam zadáte název pole a value, kam zadáte hodnotu (například <INPUT type="hidden" name="typ_formulare" value="osobní_dotaznik">.

Textové pole s definovanou velikostí

Minule jsme si ukázali, jak vytvořit textové pole pomocí parametru type=text. Tento způsob umožňuje vytvářet pole pouze o jediném řádku, což nemusí vždy postačovat. Pokud například chcete, aby vám uživatelé mohli psát vzkazy, bude vhodnější vytvořit pro tyto účely větší prostor. K tomu slouží párový element TEXTAREA, který má následující parametry:
  • cols - šířka oblasti zadávaná v počtu znaků
  • rows - výška oblasti zadávaná v počtu řádek
  • wrap - způsob zalamování zapsaného textu. Hodnota off znamená, že se text nezalamuje, hodnota virtual že se text zalamuje pouze na obrazovce, ovšem odeslán je jako jediný řádek a konečně hodnota physical znamená, že se text zalamuje a odesílá se včetně znaků zalomení řádku.
<B>Vzkaz pro autora stránek:</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.cz" method=post><BR>
<TEXTAREA cols=40 rows=4 wrap="virtual"></TEXTAREA><BR>
<INPUT type="submit" value="Odešli vzkaz!"><INPUT type="reset" value="Smaž vzkaz!"><BR>
</FORM>

a v praxi to vypadá následovně:

Vzkaz pro autora stránek:

Pro dnešek si dáme pohov, ale za týden budeme ve formulářích pokračovat. Do té doby si zkuste vytvořit formulář, do kterého umístíte všechny prvky, které jsme se zatím naučili, to je textové pole, pole pro zadání hesla, zaškrtávací pole, přepínací pole, skryté prvky a textové pole s více řádky.


Jak vytvářet www stránky - 15. díl

21. únor 2000 - Seriály

Formuláře - 2. pokračování

Minulé dva díly jsme věnovali formulářům a nejinak tomu bude i tentokrát. V tomto již patnáctém pokračování se podíváme na další prvky, které lze umístit do formuláře a na závěr vás čeká lahůdka, díky níž budou moci návštěvníci vašich stránek vyhledávat v českém Internetu pomocí jednoho ze tří největších vyhledávacích serverů. Příští týden bude trošku oddychový, protože si ukážeme několik tipů a triků, ale na to si budete muset ještě sedm dnů počkat. Takže hurá na formuláře!

Roletková menu a seznamy

K vytváření roletkových menu a seznamů slouží element SELECT, jednotlivé volby pak uvozujeme tagem OPTION, který můžeme ale nemusíme uzavírat. Zjednodušeně vypadá struktura takového menu následovně:

<SELECT parametry>
<OPTION parametry>možnost číslo 1
<OPTION parametry>možnost číslo 2
<OPTION parametry>možnost číslo 3
.
.
.
<OPTION parametry>možnost číslo x
</SELECT>

Tag SELECT může mít následující parametry:

  • name - označení formulářového prvku, které je velmi důležité a nesmí se v jednom formuláři vyskytovat více než jednou. Pokud vytváříte formulář, jehož výsledky budou odesílány elektronickou poštou, dostanete výsledky ve tvaru jméno formulářového prvku=vybraná hodnota tedy name=value (k vybrané hodnotě se dostaneme o něco níže ve výkladu tagu OPTION).
  • size - určuje, kolik položek bude současně zobrazeno. U klasického roletkového menu je nastavujeme parametr size na jedničku. Ostatní nabízené možnosti se zobrazí až při rozbalení menu.
  • multiple - tento parametr nemá žádnou hodnotu. Jeho uvedení v tagu SELECT znamená, že uživatel může z nabídky vybrat více než jednu hodnotu. Více položek může uživatel vybrat použitím klávesy Ctrl nebo Shift při kliknutí myší na vybranou položku (podobným způsobem se vybírají soubory v Průzkumníkovi).
U tagu OPTION jsou pak důležité dva parametry:
  • selected - uvedení tohoto parametru u některé položky znamená, že položka bude implicitně označená jako vybraná.
  • value - označení vybrané hodnoty. Jak jsme již uvedli u tagu SELECT, je tento parametr důležitý zejména pro další zpracování formuláře.
Uvedeme si jednoduchý příklad:

Chceme vytvořit formulář, jehož účelem by mělo být zjištění nejoblíbenější příchuti zmrzliny. Použijeme k tomu roletkové menu: prvek pojmenujeme zmrzlina (tedy name="zmrzlina"), necháme zobrazovat vždy pouze jednu položku (size=1) a nedáme možnost výběru více než jedné položky (neuvedeme tedy parametr multiple). Budeme předpokládat, že nejvíce lidí má rádo čokoládovou zmrzlinu, proto tuto hodnotu vybereme jako přednastavenou (u položky s čokoládovou zmrzlinou uvedeme v tagu OPTION parametr selected). Pochopitelně nezapomeneme ani na tlačítko k odeslání formuláře. Celé dílko tedy bude vypadat následovně:

<FORM name="test" ENCTYPE="text/plain" ACTION="mailto:jmeno@server.cz">
<B>Jakou zmrzlinu máte nejraději?</B><BR>
<SELECT name="zmrzlina" size=1>
<OPTION name="citronova">Citrónovou
<OPTION name="jahodova">Jahodovou
<OPTION name="cokoladova" selected>Čokoládovou
<OPTION name="vanilkova">Vanilkovou
<OPTION name="pistaciova">Pistáciovou
<OPTION name="kavova">Kávovou
<OPTION name="jiná">Jinou
</SELECT>
<INPUT type="submit" value="Odešli data">
</FORM>

A výsledek vypadá následovně:

Jakou zmrzlinu máte nejraději?

Obrázek místo tlačítka

Možná jste si všimli, že na některých serverech se k odeslání dat nebo požadavku nepoužívá šedivé obdélníkové tlačítko, které nemusí vždy vyhovovat vašemu estetickému cítění ani celkovému designu stránky. Namísto něj lze použít obrázek (nebo libovolný grafický prvek), ovšem dávejte bedlivý pozor, aby bylo na první pohled jasné, že tento obrázek slouží k odeslání dat. Grafického tlačítka docílíte pomocí již dobře známého tagu INPUT s parametrem type=image, obrázek, který chcete použít místo tlačítka, pak určíte parametrem src=adresa obrázku. Pokud zůstaneme u předchozího příkladu, bude stačit pouze zaměnit předposlední řádek, který by například mohl vypadat takto:

<INPUT type="image" src="obrazek.gif">

Vyhledávání v českých vyhledávačích

Chcete-li umožnit návštěvníkům vašich stránek vyhledávání přes některý vyhledávač, můžete to provést snadno tak, že vytvoříte formulář, který bude odesílán příslušnému serveru. Proto v tagu FORM do parametru action zadáme adresu skriptu, který má na starosti zpracování dotazu. Stručně si ukážeme, jak lze vyhledávat pomocí Seznamu, Atlasu a Centra. Modře označený text je pouze orientační komentář, který do svých stránek nevkládejte.

Seznam

<FORM method="get" action="http://www.seznam.cz//hledej.cgi"> zde se určuje adresa skriptu a způsob odeslání
<INPUT type="hidden" name="typ" value="or"> skrytý prvek zajišťující pomocný parametr pro vyhledávání
<INPUT size="30" name="string"> textové políčko pro zadání hledaného výrazu
<INPUT type="submit" value="Odeslat!"> odesílací tlačítko
</FORM> ukončení formuláře

Atlas

<FORM action="http://www.atlas.cz/resultp.asp" method="get"> adresa skriptu a způsob odeslání
<INPUT type="hidden" name="ct" value="cri"> skrytý prvek obsahující pomocný parametr
<INPUT type="hidden" name="so" value="rank[d], DocTitle"> další skrytý prvek obsahující pomocný parametr
Kde chcete hledat:
<SELECT name="kde" size="1"> roletkové menu umožňující volbu způsobu vyhledávání
<OPTION value="f" selected>v českém Internetu</option> první položka roletkového menu
<OPTION value="k">v katalogu stránek</option> druhá položka roletkového menu
</SELECT><BR>
<INPUT type="text" size="30" maxlength="200" name="qu"> textové políčko pro zadání hledaného výrazu
<input TYPE="submit" VALUE="Odeslat!" name="hledej"> odesílací tlačítko
</FORM> ukončení formuláře

Centrum

<FORM name="hledani" action="http://fulltext.centrum.cz/search.php" method="get">
Kde chcete hledat:
<SELECT name="sec">
<OPTION value="kat">v Centru
<OPTION value="all">ve fulltextu
<OPTION value="obch">v obchodech
</SELECT><BR>
<INPUT type=hidden name="go" value="1">
<INPUT type=hidden name="typ" value="std">
<INPUT type=hidden name="disp" value="nor">
<INPUT type="text" name="q" size="30">
<INPUT type="submit" value="Odeslat!">
</FORM>

Komentář snad není potřeba - pouze pro orientaci obsahuje tento formulář roletkové menu se třemi položkami a tři skryté parametry.

Jak pracuje odesílání formulářů metodou get můžete dobře poznat právě u těchto formulářů. Stačí, když si vytvoříte jednoduchou stránku s některým z vyhledávačů, zadáte do textového políčka hledaný termín, nastavíte parametry a odešlete dotaz. Pak se stačí pouze podívat do adresního řádku prohlížeče kde během chvilky najdete všechny proměnné i jejich hodnoty.

To je pro tento týden vše. Zkuste si pomocí formuláře vytvořit nějakou anketu pro své stránky, případně se můžete pokusit vytvořit formuláře i pro další české a světové vyhledávací servery. Příští týden se těším u dalšího dílu zase nashledanou.


Jak vytvářet www stránky - 16. díl

28. únor 2000 - Seriály

Formuláře - 3. pokračování

Dnes si ukážeme, jak můžete vyšperkovat své webové formuláře pomocí několika jednoduchých fíglů. Na závěr si ukážeme několik tipů a triků, které zatraktivní vaše stránky a také usnadní orientaci vašim návštěvníkům.

Vylepšené tlačítko (BUTTON)

Protože tlačítko vytvořené pomocí elementu INPUT nenabízí příliš široké možnosti, objevil se v normě HTML 4.0 samostatný tag BUTTON (tlačítko, knoflík). Ten umožňuje mnohem lépe specifikovat vlastnosti tlačítka, do kterého lze nyní umísťovat objekty jako například obrázky, tabulky, formátovaný text atd.
  • name - jméno prvku, které je důležité zejména v případě, že jsou na toto tlačítko vázané nějaké skripty.
  • value - hodnota, která je předána serveru v okamžiku stisknutí tlačítka.
  • type - nabízí tři varianty: submit (odeslání dat z formuláře), reset (vymazání formuláře a nastavení všech polí do výchozího stavu) a button (tlačítko, které nevykoná žádnou akci s vlastním formulářem, ale provede zadaný skript)
  • disabled - tento parametr způsobí, že tlačítko nebude aktivní (uživatel jej tedy nebude moci stisknout).
  • accesskey - definování klávesové zkratky, která umožní stisknutí tlačítka bez použití myši.
Jak si vytvoříte vzhlednější tlačítko si ukážeme na příkladu ze 14. dílu:

<B>Které deníky čtete pravidelně?</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.cz" method=post>
<INPUT type="checkbox" name="deniky" value="mladafronta" chcecked>Mladá Fronta DNES<BR>
<INPUT type="checkbox" name="deniky" value="blesk">Blesk<BR>
<INPUT type="checkbox" name="deniky" value="pravo">Právo<BR>
<INPUT type="checkbox" name="deniky" value="hn">Hospodářské noviny<BR>
<INPUT type="checkbox" name="deniky" value="ln">Lidové noviny<BR>
<INPUT type="checkbox" name="deniky" value="dalsi">Další deníky<BR>
<BUTTON name="tlacitko" type="submit" accesskey="O">
<B><U>O</U>deslat data ke zpracování</B><BR>
<FONT color="red">jak vidíte, lze v tlačítku BUTTON použít i barevný text</FONT><BR>
</BUTTON>
</FORM>

A takto vypadá výsledek:

Které deníky čtete pravidelně?

Mladá Fronta DNES
Blesk
Právo
Hospodářské noviny
Lidové noviny
Další deníky

Kromě formátovaného textu můžete do tlačítka vkládat obrázky, tabulky a většinu prvků standardu HTML.

Rámečky ve formulářích (FIELDSET a LEGEND)

K lepší orientaci může pomoci rozčlěnění jednotlivých prvků formuláře do několika částí. K tomu slouží párové tagy FIELDSET a LEGEND. FIELDSET ohraničí všechny formulářové prvky, které jsou umístěném mezi úvodním a zakončovacím tagem, tenkým rámečkem, čímž je opticky oddělí, LEGEND pak nabízí vytvoření popisku tohoto rámečku. Tag FIELDSET nemá žádné důležité parametry, u tagu LEGEND je podstatné pouze jeho zarovnání vzhledem k rámečku pomocí parametru align. Hodnoty jsou podobné jako u většiny prvků HTML, tedy top (zarovnání nahoru), bottom (zarovnání dolů), left (doleva) a right (doprava).

Jak může vypadat takto vylepšený formulář vidíte opět na příkladě:

<FORM name="test" ENCTYPE="text/plain" ACTION="mailto:jmeno@server.cz">
<FIELDSET>
<LEGEND align="top">Informace o uživateli</LEGEND>
Jméno: <INPUT type="text" name="jmeno" size=30 maxlength=45 align="left"><BR>
Příjmení: <INPUT type="text" name="prijmeni" size=30 maxlength=45 align="left"><BR>
e-mail: <INPUT type="text" name="email" size=30 maxlength=45 align="left"><BR>
</FIELDSET>
<FIELDSET>
<LEGEND align="top">Konfigurace počítače</LEGEND>
Procesor:<BR>
<INPUT type="radio" name="procesor" value="pentium3" chcecked>Pentium III<BR>
<INPUT type="radio" name="procesor" value="pentium2" chcecked>Pentium II<BR>
<INPUT type="radio" name="procesor" value="celeron" chcecked>Celeron<BR>
<INPUT type="radio" name="procesor" value="pentiummmx" chcecked>Pentium MMX<BR>
<INPUT type="radio" name="procesor" value="pentium" chcecked>Pentium<BR>
<INPUT type="radio" name="jiny" value="pentium" chcecked>Jiný<BR>
Mechaniky pro přenosná média:<BR>
<INPUT type="checkbox" name="vybava" value="cdrom" chcecked>Mechanika CD ROM<BR>
<INPUT type="checkbox" name="vybava" value="cdr" chcecked>Mechanika CD-R<BR>
<INPUT type="checkbox" name="vybava" value="cdrw" chcecked>Mechanika CD-RW<BR>
<INPUT type="checkbox" name="vybava" value="zip" chcecked>Mechanika ZIP<BR>
<INPUT type="checkbox" name="vybava" value="ls120" chcecked>Mechanika LS120<BR>
</FIELDSET>
<INPUT type="submit" value="Odešli data">
</FORM>

Jistě mi dáte za pravdu, že formulář je díky rámečkům s legendou mnohem přehlednější:

Informace o uživateli Jméno:
Příjmení:
e-mail:
Konfigurace počítače Procesor:
Pentium III
Pentium II
Celeron
Pentium MMX
Pentium
Jiný
Mechaniky pro přenosná média:
Mechanika CD ROM
Mechanika CD-R
Mechanika CD-RW
Mechanika ZIP
Mechanika LS120

Tipy, triky a vylepšení

Ačkoli jsme se zatím pečlivě drželi normy HTML 4.0 dle doporučení W3C, nabídneme vám desítku tipů, které osvěží vaše www stránky, ovšem neručíme za to, že budou fungovat v úplně všech prohlížečích (v MS Internet Exploreru 4.0 a 5.0, který používá drtivá většina uživatelů však fungovat budou). Některé ukázky jsou zpracované pomocí JavaScriptu a CSS, takže budou fungovat pouze v prohlížečích, které JavaScript a CSS podporují.

Tip č. 1: Návrat o stránku zpět

Chcete-li, aby se uživatel mohl vrátit na stránku, z níž přišel (bez ohledu na to, kde je tato stránka umístěna), použijte pro odkaz následující kód:

<A href="JavaScript:history.back()">libovolný text viditelný jako odkaz</a>

Kliknutí na takovýto odkaz má zcela stejný význam, jako stisk tlačítka Zpět (resp. Back) v horní liště browseru.

Tip č. 2: Tlačítko místo odkazu

Jestliže chcete mít místo textového hyperlinkového odkazu tlačítko, můžete použít "prázdný formulář". Zdrojový kód takového objektu vypadá následovně:

<FORM action="adresa" method="get">
<INPUT type="submit" value="popis tlačítka">
</form>

Místo parametru adresa vepište adresu na odkazovaný server nebo dokument., místo popis tlačítka pak to, co uvidí návštěvník napsané na tlačítku.

Tip č. 3: Jak vypsat uživateli jméno jeho browseru

Chcete-li, aby se návštěvníkovi vašich stránek v textu zobrazilo jméno prohlížeče, který používá, stačí do těla dokumentu vložit kraťoučký JavaScript.

<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(navigator.appName)
// -->
</SCRIPT>

Výsledek může vypadat například takto: Používáte

Tip č. 4 - uzavření okna kliknutím na odkaz

Chcete-li dát návštěvníkovi svých stránek možnost uzavřít aktuální okno prohlížeče kliknutím na hyperlinkový odkaz, stačí vložit do stránky následující kód:

<A HREF=JavaScript:onclick=self.close()>uzavřít toto okno</A>

Na vlastní kůži si tento efekt můžete vyzkoušet kliknutím sem.

Jednoduché, ale efektní...

Tip č. 5: Automatické přesměrování na jinou stránku - 1. způsob

Tento tip se vám bude hodit v případě, že přestěhujete své www stránky na jiný server. Návštěvník, který si pamatuje pouze starou adresu tak bude automaticky přesměrován na nové umístění, aniž by musel kamkoli kliknout.

Stačí do kódu stránky vložit jednoduchoučký JavaScript, v němž proměnou kam presmerovat nahradíte novou adresou svých www stránek (např. http://www.zive.cz/):

<SCRIPT language="JavaScript">
<!--
window.location="kam presmerovat";
//-->
</SCRIPT>

Tip č. 6: Automatické přesměrování na jinou stránku - 2. způsob

V předchozím tipu jsme si popsali přesměrování na jinou www stránku pomocí JavaScriptu. Dnes si popíšeme další způsob, kterým lze dosáhnout téhož.

Stačí na libovolný řádek mezi tagy <HEAD> a </HEAD> umístit následující tag META:

<META HTTP-EQUIV="Refresh" CONTENT="cas; URL=adresa">

Místo proměnné cas zadáte počet vteřin, po kterých má dojít k přesměrování, místo adresa pak vyplníte adresu stránky, na níž má dokument přesmerovávat. Dávejte pozor především na správný zápis uvozovek - celkem jsou v tomto elementu pouze čtyři!

Tip č. 7: Přidání stránky k oblíbeným položkám kliknutím na odkaz

Chcete-li, aby si uživatelé mohli přidat vaší stránku k oblíbeným položkám bez toho, aby museli v menu Oblíbené klikat na volbu Přidat k oblíbeným položkám a následně vše ještě potvrzovat stiskem tlačítka OK, můžete jim vytvořit odkaz, který se postará o jednodušší zařazení vaší stránky mezi oblíbené. Stačí na libovolné místo stránky umístit následující kód:

<SCRIPT language="javascript">
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0) && (parseInt(navigator.appVersion) >= 4)) {document.write("<U><SPAN onclick='window.external.AddFavorite(location.href, document.title);'>Přidat stránku k Oblíbeným položkám</SPAN></U>");}
//-->
</SCRIPT>

Poznámka: modře označený text musí být umístěn v jediném řádku

Jak vypadá výsledek si můžete vyzkoušet kliknutím na odkaz

Tip č. 8: Odeslání e-mailu na dvě adresy současně

Zcela jednoduchou úpravou odkazu můžete dosáhnout toho, že po kliknutí na tento odkaz se otevře okno mailovacího programu s vyplněnou adresou dvou různých příjemců. Pokud pak uživatel něco napíše a stiskne tlačítko Odeslat, bude příslušná zpráva odeslána současně na obě adresy. Zdrojový kód vypadá následovně:

<A HREF="mailto:prijemce1@server.cz?CC=prijemce2@server2.cz">Napište nám!</A>

Například si tak můžete nechat posílat zprávy na e-mail domů i do zaměstnání. Chcete-li si vyzkoušet, jak to celé funguje, zkuste kliknout sem.

Tip č. 9: Jak zajistit, aby se vaše stránky zobrazovaly hezky česky

Některé browsery mohou nesprávně zobrazovat češtinu na vašich stránkách, proto je dobré hned v záhlaví definovat kódovou stránku, v níž je dokument napsán. To provedete jednoduchým meta-tagem, který umístíte mezi tagy <HEAD> a </HEAD>. Zdrojový kód tohoto tagu vypadá takto:

<META http-equiv="Content-Type" content="text/html; charset=windows-1250">

Pokud browser zná kódovou stránku 1250 (což zná většina browserů), automaticky se přepne a vaše stránky budou zobrazeny s dokonalou češtinou.

Tip č. 10: Odkaz, který se podrthne až po aktivaci kurzorem

Pokud si na stránce vytvoříte hyperlinkový odkaz, bude ve většině prohlížečů zobrazen podtrženým písmem, což může v některých případech působit rušivým dojmem. Chcete-li, aby se odkaz podtrhnul až v okamžiku, kdy na něj uživatel ukáže kurzorem myši, můžete si pomoci kaskádovými styly. Stačí kamkoli do stránky (nejlépe však na její začátek hned po tagu BODY) umístit následující kód:

<STYLE>
<!--
a {text-decoration:none}
a:hover {text-decoration:underline}
-->
</STYLE>

Tolik tedy dnešní dlouhý díl seriálu o HTML. Za týden se těším opět nashledanou.


Jak vytvářet www stránky - 17. díl

27. březen 2000 - Seriály

V uplynulých šestnácti dílech jsme si poměrně podrobně vysvětlili, jak vytvářet www stránky. Pokud jste vydrželi a četli pečlivě každé pokračování, pak umíte v tuto chvíli vytvořit vlastní webovou prezentaci a možná vás napadá otázka, jak dostat stránky ze svého pevného disku na Internet. Právě tomuto tématu věnujeme dnešní kapitolu.

Bod 1: K čemu ty stránky budou?

V první řadě si musíte vytyčit cíl, kterého svými stránkami chcete dosáhnout. Je rozdíl, zda chcete pouze světu říci "ahoj, tohle jsem já", či zda budete propagovat své programy, založíte si vlastní internetový časopis, nebo budete prezentovat svou firmu. Pro každý účel je vhodný zcela jiný typ webu. Až si tuto otázku vyjasníte, zkuste se podívat na podobné stránky – sledujte zejména jejich grafické provedení, strukturu, hierarchii a zkuste najít body, ve kterých se vzájemně podobají. Právě aplikace těchto "podobností" na vlastní web vám zajistí, že návštěvníci nebudou vašimi stránkami zklamáni a nebudou bloudit, protože pokud jim nabídnete prostředí, na které jsou zvyklí, budou si prostě připadat "jako doma". Dávejte ale pozor na kopírování – obsah i design webových prezentací podléhá Autorskému zákonu!

Bod 2: Hierarchické uspořádání

Jedním z nejzásadnějších bodů je kvalitní hierarchické uspořádání webových stránek. Zkuste si nejprve celou strukturu vašeho webu nakreslit na papír. Zakreslete si odkud kam povedou odkazy a snažte se, aby měl návštěvník z každé stránky možnost vrátit se alespoň na hlavní stránku, případně do dalších důležitých sekcí. V každém okamžiku by mělo být zřejmé, ve které části webu se návštěvník právě nachází – velmi pěkně je tento problém řešen u internetových katalogů (například na Seznamu můžete v horní části stránky vidět odkazy Obsah-Zábava-Televize-Seriály, takže hned víte, kde jste).

Bod 3: Grafické provedení

Grafické provedení je jedním z důležitých bodů – budou-li mít vaše stránky zajímavý obsah, ale odpuzující vzhled, patrně většinu návštěvníků na první pohled neupoutají (na druhou stranu ani sebelépe provedené stránky se slabým obsahem návštěvníky nedonutí k tomu, aby zůstali). Opět záleží na tom, k čemu vaše stránky budou sloužit. Pro soukromý web si můžete dovolit trochu více, než třeba pro internetový časopis. Firemní stránky by ale měly být především informační, protože na nich určitě návštěvníci nehledají proužky s blikajícími žárovičkami či odkapávající krví. Pamatujte také na to, že příliš mnoho grafiky odrazuje – máte-li kvalitní obsah, pak návštěvník, který váš web zná, si nějakou tu chvilku rád počká, ale ten, kdo vaše stránky ještě neviděl, odejde po několika desítkách vteřin jinam. Optimem je natažení stránky do 30 vteřin, ale dá se akceptovat délka až do jedné minuty. Obecně platí, že stránka včetně grafiky by neměla přesáhnout 80-100 kB.

Bod 4: Úvodní stránka

Úvodní stránka rozhoduje o tom, zda váš návštěvník zadá do adresního řádku prohlížeče jinou adresu, nebo zda zůstane. Měla by tedy hned na první pohled upoutat a to především svým obsahem. Z tohoto pohledu jsou tedy zcela nevhodné stránky neobsahující nic, než tlačítko "vstupte". Snažte se na úvodní stránce stručně ukázat pokud možno vše, co lze na vašem webu nalézt. Kromě odkazů na všechny sekce by neměl chybět kontakt na vás a přehled všech aktualit, které jste na své stránky přidali v poslední době (je vhodné nezapomínat na uvádění data, případně i času aktualizace). U zpravodajských serverů najdete hned na úvodní stránce odkazy na všechny aktuální články včetně krátkého popisku, na firemních stránkách můžete upozornit na aktuální ceníky nebo třeba informace o nejnovějším zboží. Nezapomínejte ale na jednoduchost – bude-li vaše úvodní stránka obsahovat několik desítek odkazů, nebude návštěvník vědět kam kliknout dříve. Raději odkazujte na jednotlivé sekce, přičemž ke každému odkazu můžete přidat například titulky tří nejaktuálnějších informací v dané sekci.

Bod 5: Testování

Důkladně své stránky otestujte. Pokud totiž nebude něco fungovat, může to návštěvníkovi zkazit náladu a již se nikdy na vaše stránky nevrátí. Dejte si zejména pozor na neplatné odkazy a na správné zobrazení všech důležitých prvků ve většině internetových prohlížečů (testujte stránky alespoň v MS Internet Exploreru 4.x a Netscape Navigatoru 4.x). Máte-li možnost, nechejte své stránky otestovat co největším počtem lidí a bedlivě poslouchejte jejich kritiku, připomínky, názory a nápady. Ideálním prostředím je Intranet – pokud nebude něco fungovat, můžete to opravit a kolegovi, který na nedostatek přišel, poděkovat a případně vysvětlit kde byl problém. Až stránky vystavíte na Internetu, nebudete mít žádnou možnost, jak návštěvníkovi říct "aha, ono to nefunguje, tak to jsem zapomněl v jednom tagu zadat adresu..." a navíc skutečně jen málokdo vás upozorní na nalezené chyby.

Bod 6: Kam s ním?

Máte na disku celý dokonale odladěný a otestovaný web site a přichází další zásadní otázka: kam celou prezentaci umístit? Existuje několik možností:
  • Koupě domény 2. řádu – tato varianta je vhodná zejména pro firmy, protože adresa www.neco.cz vypadá lépe na vizitkách či propagačních materiálech a navíc si jí zákazníci zapamatují lépe, než sáhodlouhé pojednání začínající http:// pokračující názvem serveru případně několika písmeny a končící /neco, jak to zpravidla nabízejí "zadarmové" servery pro webhosting. Pokud se rozhodnete pro doménu druhého řádu, je další otázkou, zda bude tato doména běžet na vašem serveru (pak musíte mít trvalé připojení k Internetu, nejlépe pevnou linkou), nebo zda využijete nabídek některé z webhostingových služeb, která vám stránky umístí na svůj server. V obou případech budete muset platit poplatek za registraci domény a pak každý rok poplatek za udržování záznamu v databázích DNS. Zvolíte-li webhosting, připravte si ještě další peníze pro firmu, která vám poskytne prostor na svém serveru. Podívejte se také na to, jak bude postupováno v případě, že server, na kterém budete mít své stránky, nebude fungovat (zpravidla se vrací adekvátní část poplatku).
  • Free webhostingové služby – na Internetu je hned několik služeb nabízejících umístění www prezentací zdarma. Možná máte webový prostor přímo u svého providera (například uživatelé VOL, VOLny, IOL aj.), takže stačí jen zjistit (nejlépe na lince technické podpory), jakým způsobem své stránky nahrát a můžete začít prezentovat. Další možností je využití některé z "veřejných" služeb nabízejících webhosting zdarma. Pokud se zaměříte především na české uživatele, bude vhodné umístit své stránky na český server – mezi nejznámější patří MujWeb, Samuel, Centrum nebo nedávno otevřený Hyperlink. Poslední jmenovaný je vhodný i pro komerční prezentace, které jako jediný umožňuje vystavovat zcela zdarma. Budou-li vaše stránky sledovat především čtenáři ze zahraničí, pokuste se web umístit na nějaký free server přímo v jejich zemi (nejlepší je najít tuto službu pomocí lokálního vyhledávače), nebo je umístěte na server v USA, kam má většina zemí poměrně rychlé připojení.
Dávejte také pozor na to, jaký způsob správy www stránek ta která služba nabízí. Nejlepší je možnost používání FTP přístupu – pak budete potřebovat pouze program, který umí pracovat s FTP (např. Windows Commander, Cute FTP, a další) a můžete vesele a hlavně rychle kopírovat, přejmenovávat, mazat a dále upravovat své stránky. Nabízí-li služba přístup pouze přes www rozhraní (tj. přes prohlížeč), pak počítejte s tím, že rozsáhlý web site budete updatovat přes průměrně rychlé připojení až pětkrát déle, než přes FTP.

Zkuste také od kolegů či známých, kteří již na www prezentují, získat informace o tom, jak je která služba dobrá zejména z hlediska stability. To, že se po zadání adresy nezobrazí vaše stránky nebudou návštěvníci přičítat nefungujícímu nebo pomalému připojení k serveru, na němž máte své stránky, ale veškeré láteření se bude snášet na vaší hlavu (buďte rádi, že je neuslyšíte).

Bod 7: Jak přilákat návštěvníky

Tak, stránky jsme vystavili, ale k čemu by to bylo, kdyby je nikdo nenavštěvoval? Proto je nutné dát o nich vědět světu a to nejlépe prostřednictvím katalogů a vyhledávačů. Jsou-li vaše stránky určené pro české "publikum", zaregistrujte si je v českých vyhledávačích – nejdůležitější je Seznam, Atlas, Centrum a Zmije. Na škodu nebude ani registrace na slovenských vyhledávacích serverech. Na všech serverech najdete odkaz nazvaný Přidání URL nebo podobně, kde můžete zařadit své stránky do katalogu, případně do vyhledávače. Některé servery Vás zaregistrují hned, jiné až za několik dnů. Nazvěte své stránky tak, aby byly do abecedně řazených katalogů umístěny někam na začátek, nebo na konec - prostřední část čtou návštěvníci nejméně (vhodné jsou číslice 1 až 9, nebo písmena X, Y, Z). Nezapomeňte, že nejen název rozhodne o tom, zda potenciální návštěvník navštíví Vaše stránky a dejte si záležet na popisu – musí být stručný a přitom vystihující a lákavý. Bude-li váš web určen i pro zahraniční návštěvníky, zaregistrujte si jej ve velkých vyhledávacích službách jako je Altavista, AllTheWeb, InfoSeek, Yahoo a dalších.

Dalším způsobem je spolupráce s podobně zaměřenými weby prováděná zpravidla formou "výměny" odkazů nebo ikonek na hlavní stránce (vy zobrazíte ikonku a odkaz na své stránce a druhá strana na oplátku zobrazí odkaz či ikonku na váš web). Počítejte ale s případným odmítnutím, neboť druhá strana si například bude myslet, že vaše stránky nejsou obsahově příbuzné, nebo že jsou výrazně horší.

Bod 8: Proužková reklama ano či nikoli?

Na našem Internetu existuje několik služeb nabízejících výměnu proužkové reklamy. Princip je jednoduchý – vy na svých stránkách zobrazíte reklamní proužky ostatních členů a na oplátku ostatní členové zobrazí na svých stránkách proužkovou reklamu na vaše stránky. Protože konkurence je v této oblasti velice ostrá a rozdíly jsou minimální, nebudeme vám doporučovat konkrétní službu. Nejlepším způsobem jak si správně vybrat je všímat si toho, jaká služba zajišťuje reklamu na nejnavštěvovanějších serverech. Také je dobré důkladně si prostudovat podmínky a zejména dávat pozor na tzv. výměnný poměr – tedy za kolik zobrazení reklamního proužku na vašich stránkách bude zobrazen váš reklamní proužek na jiném serveru. Užitečná je též možnost střádání kreditů a plánování reklamních kampaní (našetříte si určitý počet kreditů zobrazením reklamy na svých stránkách a například v určitý den tyto kredity tzv. "rozpustíte" a vaše reklama se začne na ostatních serverech objevovat častěji, čímž se zvyšuje pravděpodobnost, že upoutá případné návštěvníky). Mějte ale na paměti, že proužková reklama má poměrně malou účinnost v řádu několika procent. Navíc čím méně návštěvníků navštíví vaše stránky, tím méně bude zobrazována reklama ostatních členů a tím méně se bude zobrazovat váš reklamní proužek na ostatních serverech.

Bod 9: Jak zjistit kolik jich bylo?

Návštěvníky jsme přilákali, ale jak zjistit, kolik jich vlastně bylo a jaké stránky si prohlíželi? Jednou z možností jsou počítadla, ale ty neumějí obvykle nic jiného, než ukázat číslo signalizující počet zobrazení té které stránky. Mnohem lepší je vést si podrobnou statistiku – to nabízejí jednak systémy proužkové reklamy (ovšem jen na stránkách, na kterých budete mít umístěn reklamní proužek), nebo služby, které vám zdarma povedou kompletní statistiku. Mezi nejznámější patří Navrcholu a TopList. Po registraci získáte kód, který vložíte do svých stránek a na jeho základě bude příslušný server zaznamenávat všechny přístupy. Snadno tak získáte přehled o tom, kolik návštěvníků na vaše stránky přišlo, kolik a které stránky si prohlíželi, odkud přišli, z jaké byli domény a případně i další informace jako například typ prohlížeče a operační systém jejich počítače. To je dobré především pro další rozvoj stránek, protože budete-li vědět, co vaše návštěvníky nejvíce zajímá, budete moci reagovat zvýšením aktivity v dané oblasti.

Bod 10: Aktualizujte!

O aktualizování se dá říci jediné: čím častěji, tím lépe, protože návštěvníci se musí vracet (to by měl být účel všech stránek). Nejlepší je samozřejmě denní aktualizace, která je ale časově velmi náročná. Osobně doporučuji aktualizovat týdně, maximem je pak aktualizace jednou za čtrnáct dnů. Nejtěžší je nepřestat a nenechat se zlomit počátečním neúspěchem – počítejte s tím, že z počátku vaše stránky navštíví třeba jen dva nebo tři návštěvníci denně, ale vydržíte-li a budou-li vaše stránky hodně dobré, vypracujete se jednou třeba na nejnavštěvovanější server na českém Internetu. Pokud vám poslední věta připadá jako nereálná vize, pak věřte, že i Seznam kdysi nějak začínal!

Tolik tedy dnešní desatero. Pokud se rozhodnete, že do toho krásného dobrodružství jménem "webová prezentace" půjdete, budu vám držet palce. Každopádně se za týden těším u dalšího pokračování našeho seriálu, které věnujeme rámům.


Jak vytvářet www stránky - 18. díl

3. duben 2000 - Seriály

Rámy

Rámy milované i nenáviděné. Na jednu stranu přinášejí řadu výhod, na druhou mohou způsobovat problémy. Ať tak nebo tak, do HTML patří a proto jim věnujeme dva díly našeho seriálu.

K čemu tedy rámy jsou? Stručně řečeno umožňují rozdělit stránku do několika navzájem nezávislých oken. V jedné části stránky tak můžete mít reklamní proužek, v druhé navigační menu, které je shodné pro celou webovou prezentaci, další část lze pak použít pro dokumenty, které si návštěvník vyvolá pomocí zmíněného menu.

Tentokrát začneme ukázkovým příkladem, který si níže vysvětlíme:

<HTML>
<HEAD>
<TITLE>Ukázkový dokument s rámy</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="stranka_zobrazena_v_prvnim_ramu.html">
<FRAME src="stranka_zobrazena_ve_druhem_ramu.html">
</FRAMESET>
<FRAME src="stranka_zobrazena_ve_tretim_ramu.html">
<NOFRAMES>
<P>Váš prohlížeč nepodporuje rámy, chcete-li si prohlédnout jednotlivé stránky, máte možnost pomocí následujících odkazů:
<UL>
<LI><A href="stranka_zobrazena_v_prvnim_ramu.html">Odkaz na 1. stranku</A>
<LI><A href="stranka_zobrazena_ve_druhem_ramu.html">Odkaz na 2. stranku</A>
<LI><A href="stranka_zobrazena_ve_tretim_ramu.html">Odkaz na 3. stranku</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>

Pokud si připravíte odkazované stránky, zobrazí se vám v prohlížeči zhruba následující struktura:

ukázka stránky s rámy

Pokud se vám zobrazilo něco jiného, bude to nejspíše tím, že váš prohlížeč nepodporuje rámy. Právě proto jsme připravili sekci uzavřenou mezi tagy <NOFRAMES> a </NOFRAMES> poskytující alternativní obsah, protože jinak by se nezobrazilo vůbec nic. Rozhodnete-li se vytvářet své stránky pomocí rámu, neměli byste zapomínat na uživatele, jejichž browsery rámy nepodporují.

Tag FRAMESET

Pokud jste si prohlédli zdrojový kód naší ukázkové stránky pozorně, možná vám neuniklo, že chybí jeden důležitý tag a sice BODY. Ve stránkách s rámy je tento tag nahrazen novým elementem FRAMESET, který definuje rozložení stránek v okně prohlížeče.

FRAMESET má dva hlavní atributy:

  • cols - definuje počet sloupců (resp. vertikálních stránek) a jejich rozměry. Rozměry lze určovat dvěma způsoby: absolutně (počtem pixelů) nebo relativně (v procentech velikosti plochy prohlížeče).
    Element <FRAMESET cols="20%, 80%"> například znamená, že stránka bude složena ze dvou sloupců, přičemž první bude zabírat 20% šířky obrazovky a druhý 80%.
    Jistou zvláštností je znak hvězdičky *, jehož význam si vysvětlíme nejlépe na několika příkladech:

    <FRAMESET cols="10%,250,*">
    definice jednotlivých rámů
    </FRAMESET>

    V tomto případě vznikne stránka složená ze tří sloupců, přičemž první sloupec bude zabírat 10% obrazovky, druhý bude široký 250 pixelů a třetí zabere zbytek stránky.

    <FRAMESET cols="1*,250,3*">
    definice jednotlivých rámů
    </FRAMESET>

    Tentokrát bude rozložení sloupců následující: prostřední sloupec bude široký 250 pixelů, levý zabere čtvrtinu zbývajícího prostoru a pravý pak tři čtvrtiny (levý sloupec má šířku 1*, pravý pak 3*, čili bude třikrát větší než levý).

  • rows - definuje počet řádků (resp. horizontálních stránek) a jejich rozměry. U tohoto atributu platí stejná pravilda jako u atributu cols.

    Chceme-li vytvořit stránku skládající se ze dvou řádků a tří sloupců, provedeme to následovně:

    <FRAMESET rows="30%,70%" cols="33%,34%,33%">
    definice jednotlivých rámů
    </FRAMESET>

Vnořování tagu FRAMESET

Velmi často se setkáváme se stránkami, které mají v horní části jeden rám, po levé druhý a zbytek stránky je vyhrazen vlastnímu obsahu. Jak toho dosáhnout? Jednoduše - stačí se naučit vnořovat tag FRAMESET. Nutno podotknout, že k vytvoření takových stránek potřebujete jistou představivost, nebo můžete zkusit metodu pokus - omyl.

Čili, jak si takovou stránku představit. V první řadě se skládá ze dvou řádek - horní obsahuje například reklamní proužek, dolní se pak dále dělí na dvě svislé části, přičemž levá obsahuje navigační menu a pravá vlastní stránku. Budeme tedy muset rozdělit stránku na dvě vodorovné části (<FRAMESET rows="20%, *">) a druhou část pak svisle rozdělit dalším rámem (<FRAMESET cols="100,*">). Opět bude nejlepší si to vysvětlit na komentovaném příkladu

<HTML>
<HEAD>
<TITLE>Naše ukázková stránka</TITLE>
</HEAD>

<FRAMESET rows="20%, *"> - tady prohlížeči sdělujeme, že stránka bude rozdělena vodorovně na dvě části
<FRAME src="jedna.html"> - definujeme obsah horní části stránky
<FRAMESET cols="100, *"> - dolní část dělíme svisle na dva sloupce
<FRAME src="dva.html"> - definujeme obsah levého sloupce
<FRAME src="tri.html"> - definujeme obsah pravého sloupce
</FRAMESET> - uzavíráme svislé rozdělení stránky
</FRAMESET> - uzavíráme vodorovné rozdělení stránky

</HTML>

Tag FRAME

V předchozích příkladech jsme několikrát použili tag FRAME, jehož význam vám byl až do této chvíle utajen. Jeho účel je jednoduchý - v tagu FRAME definujeme obsah a vlastnosti jednotlivých rámů. Parametrů opět není mnoho a jejich význam je celkem jasný:
  • src - definuje stránku, která bude načtena do příslušného rámu. Zadává se stejně jako adresa v hyperlinkovém odkazu, tedy relativně nebo absolutně.
  • name - jméno rámu. To je velice důležité pro správnou funkci stránek. Pokud například v navigačním menu zvolíte nějakou položku, musí prohlížeč vědět, do kterého rámu má načíst odkazovanou stránku. Právě parametr name přiřazuje jednotlivým rámům jména, na která se odkazuje, proto na něj nikdy nezapomínejte.
  • frameborder - určuje, zda bude okno odděleno od ostatních rámečkem. K dispozici jsou pouze dvě hodnoty: 0 (okno nebude odděleno rámečkem) a 1 (okno bude odděleno rámečkem). Pokud hodnotu tagu neurčíte, bude většinou browserů mezi okna vložen rámeček, což nemusí působit zrovna esteticky.
  • marginwidth - velmi vhodný parametr určující vzdálenost obsahu rámečku od horního a dolního okraje. Udává se v pixelech.
  • marginheight - obdoba parametru marginwidth. Tentokrát definuje vzdálenost obsahu rámečku od levého a pravého okraje. Pochopitelně i v tomto případě se udává v pixelech.
  • noresize - pokud uvedete tento parametr, nebude mít uživatel možnost měnit velikost příslušného rámu.
  • scrolling - tento parametr určuje, zda bude možné rolovat obsahem rámu (tj. zda bude po straně zobrazena rolovací lišta, která umožní posouvat stránku). K dispozici jsou tři hodnoty: yes (obsah rámu je možné posouvat, lišta bude zobrazena i v případě, že není nezbytně nutná), no (obsah rámu není možné posouvat. Toto nastavení nedoporučujeme, neboť návštěvníci vašich stránek mohou mít nastavené různé rozlišení a obsah rámu se nemusí vejít do stanovených rozměrů) a auto (obsahem rámu je možné posouvat, lišta bude zobrazena pouze v případě, že se obsah nevejde do rámu. Tato hodnota je patrně nejvhodnější). Pokud parametr scrolling neuvedete, dosadí si většina prohlížečů jako jeho hodnotu auto.
Pokud si tedy budeme chtít vytvořit skutečně dobrou stránku podobnou té z předcházejícího příkladu, mohl by kód vypadat například následovně:

<HTML>
<HEAD>
<TITLE>Naše ukázková stránka</TITLE>
</HEAD>
<FRAMESET rows="20%, *">
<FRAME src="jedna.html" name="reklamnibanner" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
<FRAMESET cols="100, *">
<FRAME src="dva.html" name="ovladacimenu" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
<FRAME src="tri.html" name="vlastnistranka" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
</FRAMESET>
<NOFRAMES>
obsah pro uživatele, jejichž prohlížeč nepodporuje rámy
</NOFRAMES>
</FRAMESET>
</HTML>

Do příští lekce si můžete připravit tuto stránku (nazvěte si jí například ramy.html) a stránky jedna.html, dva.html a tri.html, do kterých zatím vložte pouze základní tagy. Příště si právě na tomto příkladu ukážeme, jaká kouzla můžete s rámy provádět, ale také si povíme o tom, jaké nevýhody přinášejí.


Jak vytvářet www stránky - 19. díl

10. duben 2000 - Seriály

Rámy – pokračování

V předcházejícím díle jsme si vysvětlili základy vytváření stránek s rámy – umíte tedy vytvořit stránku, která se skládá z několika jiných stránek a umíte také určit jejich rozložení. Kouzlo rámů ale spočívá v něčem jiném, než pouze v tom, že načtete do prohlížeče více stránek současně. Jak jsme již naznačili, slouží rámy především ke snadnějšímu ovládání stránek – například budete chtít zobrazit v horní části stránky reklamní banner, po levé straně připravíte menu a zbytek stránky se bude měnit podle toho, jakou položku z menu uživatel zvolí. Pro tyto účely jsme si minule připravili následující stránku, kterou jsme nazvali ramy.html:

<HTML>
<HEAD>
<TITLE>Naše ukázková stránka</TITLE>
</HEAD>
<FRAMESET rows="20%, *">
<FRAME src="jedna.html" name="reklamnibanner" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
<FRAMESET cols="100, *">
<FRAME src="dva.html" name="ovladacimenu" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
<FRAME src="tri.html" name="vlastnistranka" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
</FRAMESET>
<NOFRAMES>
obsah pro uživatele, jejichž prohlížeč nepodporuje rámy
</NOFRAMES>
</FRAMESET>
</HTML>

Jak se sami můžete přesvědčit, po načtení se zobrazí stránka, která bude mít v horní části dokument jedna.html vysoký 20% výšky okna prohlížeče, po levé straně bude 100 pixelů zabírat dokument dva.html a zbytek zabere stránka tri.html. Aby byl náš příklad výstižný, vytvořte si dokument jedna.html s vloženým reklamním proužkem a do dokumentu dva.html vytvořte následující menu:

<HTML>
<HEAD>
<TITLE>Menu</TITLE>
</HEAD>
</BODY>
<UL>
<LI><A href="tri.html" target="vlastnistranka">Index</A>
<LI><A href="ctyri.html" target="vlastnistranka">Software</A>
<LI><A href="pet.html" target="vlastnistranka">Hardware</A>
<LI><A href="sest.html" target="vlastnistranka">Ovladače</A>
</UL>
</BODY>

Dokumenty tri.html, ctyri.html, pet.html a sest.html se pak budou zobrazovat ve zbývající části stránky podle toho, na který na stránce dva.html odkaz uživatel klikne. Možná vás napadla otázka, jak prohlížeč pozná, že má stránku načíst zrovna do okna, kde byla předtím stránka tri.html? Podívejte se ještě jednou na strukturu jednotlivých odkazů – najdete zde parametr target="vlastnistranka", který prohlížeči říká "načti odkazovanou stránku do okna, které je pojmenováno vlastnistranka". To, o které okno se jedná, se prohlížeč dozvěděl z tagu <FRAME src="tri.html" name="vlastnistranka" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>, kde parametr name určuje jméno toho kterého rámu, jež je pak použito při odkazování.

Tag BASE a parametr target

V předcházejícím příkladě vedly všechny odkazy ze stránky dva.html do rámu nazvaného vlastnistranka, takže všechny opakovaly pořád dokola jeden a tem samý parametr target. Nešlo by to nějak zjednodušit? Ale jistě že šlo! Stačí použít tag BASE, který specifikuje jméno cílového rámu pro celou stránku (v tomto případě pro naše menu). S tímto elementem by naše stránka vypadala následovně:

<HTML>
<HEAD>
<TITLE>Menu</TITLE>
<BASE target="vlastnistranka">
</HEAD>
</BODY>
<UL>
<LI><A href="tri.html">Index</A>
<LI><A href="ctyri.html">Software</A>
<LI><A href="pet.html">Hardware</A>
<LI><A href="sest.html">Ovladače</A>
</UL>
</BODY>

Tím jsme stránku zkrátili o celých 66 bajtů, aniž bychom změnili její funkčnost. Pokud budete potřebovat, aby se některý z odkazů načetl do jiného rámu, než vlastnistranka, stačí u elementu A použít parametr target, který má přednost před tagem BASE.

Pro práci s elementem BASE a parametrem target je dobré si pamatovat následující pravidla:

  1. Jestliže parametr target v odkazu ukazuje na existující rám, bude stránka, na níž je odkazováno, zobrazena v rámu, který má název odpovídající hodnotě parametru target.
  2. Jestliže stránka obsahuje element BASE a odkaz neobsahuje parametr target, bude odkazovaná stránka načtena do rámu určeného parametrem BASE.
  3. Jestliže stránka obsahuje element BASE a odkaz obsahuje parametr target odkazující do jiného rámu, bude odkazovaná stránka načtená do okna, na něž je odkazováno v parametru target.
  4. Jestliže stránka neobsahuje element BASE a odkaz neobsahuje parametr target, bude odkazovaná stránka načtena do stejného okna, jako je stránka s odkazem.
Parametr target nemusí obsahovat jen jméno okna, do kterého má být stránka načtena, může totiž mít i následující čtyři hodnoty:
  • target="_self" – dokument se načte do stejného okna.
  • target="_parent" – dokument se načte do okna definovaného nejbližším nadřazeným tagem FRAMESET.
  • target="_top" – dokument se načte do celého okna prohlížeče, čímž se zruší všechny rámy.
  • target="_blank" – dojde k otevření nového okna prohlížeče a dokument se načte do tohoto okna. Stejného účinku dosáhnete u většiny prohlížečů tak, že jako hodnotu parametru target dosadíte název nedefinovaného rámu.

Tag NOFRAMES

Již v minulém díle jsme se zmínili o tom, že ne všechny prohlížeče podporují rámy. Ani na tyto prohlížeče, respektive jejich uživatele, bychom neměli při vytváření stránek zapomínat a měli bychom jim nabídnout jinou cestu, jak získat informace uložené na našem webu. K tomu slouží párový tag NOFRAMES, jež bývá umístěn zpravidla před posledním uzavíracím tagem FRAMESET. Mezi tagy <NOFRAMES> a </NOFRAMES> můžete vložit prakticky cokoli, co bude zobrazeno v případě, že prohlížeč nepodporuje rámy. Obvykle zde najdete pouze upozornění ve stylu "váš prohlížeč nepodporuje rámy", což návštěvníka vašich stránek jistě nepřesvědčí o tom, že by si měl stáhnout browser, který rámy umí, a máte téměř stoprocentní jistotu, že již nikdy na váš web nezavítá. Připravte tedy takový alternativní obsah, aby i tito uživatelé měli možnost získat všechny informace stejně jako kdyby používali prohlížeč s podporou rámů. Vrátíme-li se k našemu příkladu ze začátku této lekce, postačí, když nabídneme stránku s odkazy, jež je v "rámové" verzi zobrazena jako menu po levé straně.

<HTML>
<HEAD>
<TITLE>Naše ukázková stránka</TITLE>
</HEAD>
<FRAMESET rows="20%, *">
...
<FRAMESET cols="100, *">
...
...
</FRAMESET>
<NOFRAMES>
Váš prohlížeč nepodporuje rámy. Můžete se tedy alespoň podívat na <A href="dva.html">obsah těchto stránek</A>.
</NOFRAMES>
</FRAMESET>
</HTML>

Vidíte, ani to moc nebolelo a s Vašimi stránkami budou spokojení nejen návštěvníci s Internet Explorerem či Netscape Navigatorem, ale i uživatelé historických nebo textových prohlížečů.

Rámy uvnitř stránky – IFRAME

V aktuální verzi HTML 4.0 se objevil nový tag IFRAME, který dovoluje definovat rámečky "uvnitř" stránky. Ukázku jeho praktické využití najdete například na Živě v diskuzních fórech u článků – v rámečku je zobrazen vlastní článek, takže k němu máte kdykoli přístup, a zbytek stránky je věnován reakcím čtenářů. Využití je samozřejmě mnoho a jistě vás napadne řada dalších způsobů, jak s "inline rámečkem" naložit. Abychom vám to poněkud usnadnili, podívám se na parametry tohoto tagu:
  • name – stejně jako u klasických rámů určuje tento parametr jméno, na něž je odkazováno.
  • src – adresa dokumentu, který bude v rámečku zobrazen.
  • frameborder – určuje, zda bude rámeček ohraničen (1 = ano, 0 = ne).
  • marginwidth – vzdálenost obsahu rámečku od horního a dolního okraje. Určuje se v pixelech.
  • marginheight – vzdálenost obsahu rámečku od levé a pravé strany. Stejně jako v předcházejícím případě se určuje v pixelech.
  • scrolling – určuje, zda bude možné obsah rámečku posouvat. Tento parametr může nabývat tří hodnot: yes (po okrajích rámečku bude zobrazen posuvník bez ohledu na to, je li jeho přítomnost nutná), no (posuvník nebude zobrazen a stránkou v rámečku nebude možné posouvat ani v případě, že její obsah přesahuje rozměry rámečku) a auto (tato hodnota je doporučená – posuvník bude zobrazen pouze tehdy, přesahuje-li obsah stránky velikost rámečku).
  • align – zarovnání rámečku. Použití tohoto parametru je zcela shodné jako u tagu IMG.
  • height – výška rámečku. Opět se nabízí paralela s tagem IMG.
  • width – šířka rámečku.
Pro názornost si zkuste vytvořit následující stránku:

<HTML>
<HEAD>
<TITLE>Ukázka stránky s inline rámečkem</TITLE>
</HEAD>
<BODY>
...
vlastní obsah stránky
...
A tady uvidíte vložený rámeček:<BR>
<IFRAME src="inline.html" width="400" height="500" scrolling="auto" frameborder="1">
Váš prohlížeč nepodporuje inline rámy. Chcete-li vidět obsah vloženého rámečku, stačí <A HREF="inline.html">sem</A>
</IFRAME>
</BODY>
</HTML>

Jak jste si jistě všimli, nepoužívá se tentokrát pro zobrazení alternativního obsahu tag NOFRAMES, ale obsah se vkládá přímo mezi otevírací a uzavírací tag IFRAME.

Nevýhody rámů

Vysvětlili jsme si vše, co potřebujete k tomu, abyste mohli vytvářet stránky s použitím rámů. Je ale nutné si uvědomit, že rámy přinášejí řadu nevýhod a je vždy velmi dobré zvážit, zda tuto technologii použijete pro své stránky. Obecně se dá říci, že stránky bez rámů jsou pro uživatele lepší, ovšem existují případy, kdy rámy velmi podstatně usnadní práci s dokumenty HTML (dobrým příkladem je rozhraní cédéčka časopisu Computer).

  1. Problémy s ukládáním stránek
    Pokud uživatel zvolí standardní postup, tedy v MS Internet Exploreru zvolí položku Soubor-Uložit jako, uloží se mu pouze stránka s informacemi o rozložení rámů, ovšem nikoli samotný obsah jednotlivých oken.
  2. Problémy s tiskem
    Pokud chce uživatel vytisknout pouze obsah jednoho rámu, nenabízí mu Internet Explorer žádnou jinou možnost, než kliknutí pravým tlačítkem myši do příslušné části. Řada uživatelů ale o této možnosti neví a tiskne tak zbytečně i obsah rámů, který je nezajímá.
  3. Obtížné přidávání stránek s rámy k oblíbeným položkám
    Pokud se dostanete na nějakou konkrétní stránku a zvolíte přidání k oblíbeným položkám, načte se příště opět pouze úvodní stránka, takže budete muset pokaždé klikat na odkazy, abyste se dostali tam, kam potřebujete.
  4. Vyšší náročnost na zpracování
    K zobrazení stránek s rámy potřebujete vyšší výkon počítače, než k zobrazení standardních stránek. To je způsobeno tím, že každý rám je vlastně novým oknem prohlížeče a tudíž více zatěžuje systém.
  5. Nižší rychlost načítání
    Uvědomte si, že čím více rámů k vytvoření svých stránek použijete, tím více stránek se bude muset ke koncovému uživateli přenášet. Při prohlížení na lokálním disku tuto skutečnost nezaznamenáte, avšak pokud si zkusíte stejné stránky načíst přes modem s rychlostí 33,6 kbps, budete se možná divit jak výrazně se přenos prodlouží.
Kromě zmíněných nevýhod existuje pochopitelně i řada důvodů, proč rámy používat. Jestliže se tedy rozhodnete své stránky vytvořit s pomocí rámů, dejte si velmi záležet na tom, aby byly maximálně optimalizované a aby neobsahovaly zbytečnosti a nadbytek grafiky.

Těším se opět za týden u "kulatého" dvacátého dílu našeho seriálu.


Jak vytvářet www stránky - 20. díl

17. duben 2000 - Seriály

Vkládání objektů

Multimediální rozšíření HTML umožňují autorům webových stránek vkládání obrázků, apletů (aplety jsou programy, které se automaticky stáhnou a spustí na počítači uživatele), video klipů a dalších rozšíření, jež mohou stránku proměnit doslova k nepoznání.

Element OBJECT

Například pokud budete chtít do stránky vložit obrázek ve formátu PNG, můžete použít následující kód:

<BODY>
<P>Zde je snímek naší školy ve formátu PNG:
<OBJECT data="skola.png" type="image/png">
Toto je <EM>snímek</EM> naší školy.
</OBJECT>
</BODY>

Předchozí verze HTML umožňovala vkládání obrázků (pomocí tagu IMG) a apletů (tag APPLET), což přinášelo některá zásadní omezení:

  • nebylo možné vkládat nové typy souborů
  • tag APPLET pracoval pouze s aplety založených na Javě. Místo tohoto tagu upřednostňuje nová norma element OBJECT.
Element OBJECT dovoluje autorům určit vše potřebné k tomu, aby se vkládaný objekt zobrazil bez ohledu na použitý prohlížeč. Kromě toho, že lze pomocí tohoto tagu vkládat do stránky typy souborů, jež prohlížeč standardně nepodporuje, můžete jím alternovat i některé stávající tagy:
  • Obrázky - místo tagu IMG.
  • Aplety - místo tagu APPLET.
  • Další HTML dokumenty - místo tagu IFRAME ("plovoucí" rám).
Pojďme se tedy podívat na tag OBJECT poněkud podrobněji. Začneme, jak jinak, popisem atributů:
  • classid - určuje umístění programu, který zpracuje vložený objekt (například pokud vložíte video sekvenci, určíte v tomto atributu adresu přehrávače). Kromě adresy lze použít i volání knihovny z registrů a sice následujícím způsobem:

    <OBJECT classid="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2" id=lbl1 width=40 height=250>
    <PARAM name="angle" VALUE="90">
    <PARAM name="alignment" VALUE="2">
    <PARAM name="BackStyle" VALUE="0">
    <PARAM name="caption" VALUE="Zdravíme všechny čtenáře">
    <PARAM name="FontName" VALUE="Arial">
    <PARAM name="FontSize" VALUE="15">
    <PARAM name="FontBold" VALUE="0">
    <PARAM name="frcolor" VALUE="9999999">
    </OBJECT>

    Pokud se podíváte do registrů do klíče HKEY_CLASSES_ROOT\CLSID\, najdete zde větev nazvanou {99B42120-6EC7-11CF-A6C7-00AA00A47DD2} (tedy stejně jako hodnota našeho parametru classid). Při podrobnějším zkoumání zjistíte, že náš vložený objekt zpracovává ActiveX OLE komponenta IELABEL.OCX, jíž jsou předány všechny parametry v elementech PARAM. K tomu, abyste věděli, jak parametry přidat musíte znát způsob volání zmíněné komponenty, což už je ovšem spíše doménou programátorů.

  • codebase - adresa, která je společná všem souborům uvedených v parametrech classid, data a archive. Pokud tento parametr neurčíte, dosadí si browser adresu právě otevřeného dokumentu.
  • codetype - určuje typ dat, které má prohlížeč stáhnout. Tento typ vychází z normy RFC2046, kterou můžete najít na http://ds.internic.net/rfc/rfc2046.txt.
Třemi výše uvedenými parametry jsme prohlížeči sdělili, kde najde program potřebný ke zpracování našeho vloženého objektu a jakým způsobem má tento program stáhnout. Nyní přichází na řadu vlastní objekt.
  • data - určuje adresu souboru, který bude zpracován výše uvedeným programem.
  • type - stejně jako codetype určuje typ dat, která budou stažena.
  • archive - tento parametr slouží k zadání alternativních adres pro případ, že by soubor zadaný v parametru data nebyl z jakéhokoli důvodu dostupný. Pokud budete chtít zadat více náhradních adres, oddělte je mezerami.
  • standby - velmi užitečný parametr, který prohlížeč zobrazuje do doby, než jsou nahrané všechny potřebné programy a data.
V tuto chvíli máme nadefinovaná jak data, tak i program potřebný k jejich prezentaci. Zbývá pouze nastavit parametry celého objektu, což je velmi podobné definování parametrů obrázků:
  • align - zarovnání
  • width - šířka (v pixelech)
  • height - výška (v pixelech)
  • border - šířka rámečku (v pixelech)
  • hspace - volný prostor kolem objektu v horizontálním směru (v pixelech)
  • vspace - volný prostor kolem objektu ve vertikálním směru (v pixelech)
Nyní se podívejte na následující ukázku a zkuste odhadnout, co se asi tak stane v případě, že takovýto kód vložíte do své stránky.

<OBJECT classid="http://www.observer.mars/TheEarth.py">
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<OBJECT data="TheEarth.gif" type="image/gif">
Obrázek <STRONG>země</STRONG> z vesmíru.
</OBJECT>
</OBJECT>
</OBJECT>

Právě tato vlastnost je na elementu OBJECT velmi užitečná - pokud totiž váš prohlížeč nebude umět otevřít soubor TheEarth.py (napsaný v jazyce Python), pokusí se na stejném místě zobrazit soubor TheEarth.mpeg. Jestliže ani v tomto případě nepochodí, otevře obrázek TheEarth.gif a pokud ani ten nepůjde z nějakého důvodu zpracovat, ukáže pouze textovou zprávu.

Element PARAM

Objektům lze, jak jsme si ukázali na příkladu s kolmým textem, předávat různé parametry. Ty se definují v elementu PARAM, který má následující atributy:
  • name - jméno parametru
  • value - hodnota parametru
  • valuetype - nabízí tři hodnoty: data, ref a object:
    • data - objektu je přímo předána hodnota uvedená ve value.
    • ref - value odkazuje na adresu, kde jsou umístěna data, jež budou předána objektu
    • object - odkazuje na jiný objekt na téže stránce.
  • type - používá se pouze v případě, že parametr valuetype má hodnotu ref a určuje typ dat, která budou stažena ze zadané adresy.
Pro lepší objasnění se podívejme na následující ukázku:

<OBJECT classid="http://www.miamachina.it/analogclock.py">
<PARAM name="height" value="40" valuetype="data">
<PARAM name="width" value="40" valuetype="data">
Váš prohlížeč neumí zobrazovat aplikace napsané v jazyce Python
</OBJECT>

V tomto případě se volá program analogclock.py a jsou mu předány parametry height a width s hodnotou 40. Je na samotném programu, jak tyto parametry zpracuje - ve zde uvedené ukázce nastaví šířku a výšku na 40 pixelů.

Myslím, že pro dnešek jste zavaleni informacemi až po krk, takže si dáme pohov. Zkuste si pohrát s vkládáním objektů a těšte se na příští týden, kdy nás čekají obrázkové mapy.


Jak vytvářet www stránky - 21. díl

25. duben 2000 - Seriály

Obrázkové mapy

Tématem tohoto dílu budou obrázkové nebo též "klikací" mapy. Názory na jejich použití se liší - můžete se setkat s názory, že klikací mapy jsou přežitkem a jejich použití není z mnoha důvodů doporučené, jiné zdroje je zase doporučují, neboť umožňují snadné vytváření různých menu. Ať je pravda na té které straně, obrázkové mapy jsou součástí HTML a proto v našem seriálu prostě nemohou chybět.

Obrázkové mapy umožňují autorům specifikovat oblast obrázku nebo objektu a přiřadit této oblasti nějakou akci (například otevření jiné stránky, spuštění programu atp.).

Rozlišujeme dva typy obrázkových map:

  • na straně klienta - když uživatel aktivuje oblast v mapě (obvykle kliknutím myší), prohlížeč zjistí, jaká akce je této oblasti přiřazená a odešle požadavek na akci serveru.
  • na straně serveru - po aktivaci oblasti jsou serveru odeslány informace o pozici na které se nachází kurzor myši a server podle toho přiřadí příslušnou akci.
Více preferovány jsou obrázkové mapy na straně klienta a to ze dvou důvodů: jsou přístupné i uživatelům s negrafickým prohlížečem a především při aktivaci je server zatěžován konkrétním požadavkem a nemusí zjišťovat, co má vlastně provést. Proto se zaměříme právě na tento druh obrázkových map.

K aplikaci obrázkových map vystačíte se dvěma tagy - MAP a AREA.

Element MAP

Tento párový tag se vám určitě bude líbit, neboť má velmi jednoduchou syntaxi - důležitý je totiž pouze parametr name, který určuje jméno mapy. Jeho účelem je vyznačení části kódu, kde je specifikováno rozložení oblastí v obrázkové mapě.

Element AREA

Zatímco tag MAP obsahoval jen jediný parametr, element AREA je ve srovnání s ním o něco složitější. Důležité je zapamatovat si, že zatímco MAP byl párový tag, AREA je nepárový (norma HTML podle W3C dokonce označuje uzavírací tag za zakázaný!). Podívejme se tedy nejprve na jednotlivé parametry:
  • shape - určuje tvar oblasti. K dispozici je čtyřúhelník (shape="rect"), kruh (shape="circle") a mnohoúhelník (shape="poly").
  • coords - určuje umístění objektu. Parametry jsou umístěny do společných uvozovek a odděleny čárkou. Syntaxe je závislá na tom, jaký jste zvolili tvar oblasti (tj. co jste zapsali do parametru shape)
  • shape="rect" - udává se jako souřadnice jednotlivých hran v pořadí levá strana-souřadnice X, horní strana-souřadnice Y, pravá strana-souřadnice X, dolní strana-souřadnice Y. Tímto způsobem zadáte libovolný čtyřúhelník.
  • shape="circle" - zadávají se souřadnice středu a poloměr kruhu v pořadí souřadnice X, souřadnice Y, poloměr.
  • shape="poly" - postupně se zadávají souřadnice všech bodů, z nichž se mnohoúhelník skládá v pořadí souřadnice X1, souřadnice Y1, souřadnice X2, souřadnice Y2, ..., souřadnice XN, souřadnice YN.
    Pro úplnost zbývá dodat, že souřadnice 0,0 je v levém horním rohu obrázkové mapy a jednotky se udávají v pixelech.
  • nohref - tento atribut použijte pouze tehdy, když oblasti není přiřazena žádná akce.
  • href - určuje adresu, na kterou vybraná oblast odkazuje.
  • alt - alternativní text, který se zobrazí uživatelům, jež mají vypnuté obrázky nebo používají textový prohlížeč.
Nyní teoreticky umíme připravit obrázkovou mapu, ale možná jste si všimli, že vůbec žádný parametr prohlížeči neříká, který obrázek na stránce má pro tuto mapu použít. Vraťme se tedy ještě jednou k elementu MAP - jediným parametrem je zde atribut name určující, jak jsme si řekli, jméno mapy. Toto jméno je nutné zapsat k obrázku, který chceme pro tuto mapu použít a to sice pomocí parametru usemap, který včleníme do tagu IMG. V zásadě tedy kostra obrázkové mapy může vypadat následovně:

<HTML>
<HEAD>
<TITLE>obrázková mapa</TITLE>
</HEAD>
<BODY>
.
.
.
vlastní obsah stránky
.
<IMG src="obrazek.gif" ... ... usemap="#obrmapa"> parametr usemap prohlížeči sděluje, že obrázek slouží jako mapa, která bude specifikována pod názvem obrmapa
.
.
<MAP name="obrmap"> specifikace obrázkové mapy. To, že se tato mapa vztahuje k obrázku obrazek.gif se prohlížeč dozví z parametru name.
<AREA href="http://www.zive.cz/".... > zde se nastavují parametry jednotlivých oblastí obrázku
<AREA href=...>
<AREA href=...>
<AREA href=...>
</MAP>

Zkusíme si tedy vytvořit jednoduché navigační menu ve tvaru proužku složené z pěti ovládacích "tlačítek" (tedy obdélníkových oblastí). Začněme tedy tím, že si v nějakém grafickém editoru vytvoříme proužek dlouhý 400 pixelů a vysoký 25 pixelů. Tento proužek vertikálně rozdělte na pět stejně velkých oblastí (tj. každá oblast bude mít rozměry 80x25 pixelů), případně můžete obarvit pozadí.

Názorná ukázka, jak by mohl váš obrázek vypadat

Do těchto oblastí vepište názvy rubrik, sekcí nebo jiné popisky, podle kterých uživatel pozná, kam která část mapy odkazuje.

A tady máme menu v plné kráse

Výsledný obrázek uložte například pod názvem menu.gif.

Do stránky jej vložíte zcela jednoduše pomocí tagu IMG, ovšem nezapomeňte na parametr usemap!

<IMG src="menu.gif" align="left" height="25" width="400" usemap="#menu" border=0>

Nyní se již můžeme zabývat naší klikací mapou. Vzhledem k tomu, že se jedná o obrázek, jehož oblasti jsou čtyřúhelníkového tvaru a jsou stejně velké, bude jejich určení poměrně jednoduché.

<MAP name="menu">
<AREA shape="rect" coords="0,0,80,25" href="http://www.zive.cz/" alt="Živě">
<AREA shape="rect" coords="80,0,160,25" href="http://www.vltava.cz/" alt="Vltava">
<AREA shape="rect" coords="160,0,240,25" href="http://www.aukce.cz/" alt="Aukce">
<AREA shape="rect" coords="240,0,320,25" href="http://www.doupe.cz/" alt="Doupě">
<AREA shape="rect" coords="320,0,400,25" href="http://www.pauza.cz/" alt="Pauza">
</MAP>

Pokud pak vložíte tento a předcházející kód do stránky, mělo by se vám zobrazit naše menu, přičemž po kliknutí na to které "tlačítko" se otevře příslušná adresa.

Poznámka: velmi důležité je určení velikosti obrázku v tagu IMG, neboť zadáte-li velikost nesprávně, může se stát, že se jednotlivé oblasti posunou, což bude pro návštěvníka vašich stránek velmi nemilé.

Nevýhody obrázkových map:

  • Vytvoříte-li nepřehlednou obrázkovou mapu s mnoha aktivními oblastmi (zejména nevhodné jsou pro tyto účely fotografie), bude uživatel zmaten a jen velmi obtížně najde místo, kam má vlastně kliknout. Dejte tedy pozor na to, aby bylo na první pohled patrné, že obrázek slouží k navigaci.
  • Řešit pomocí obrázkových všechny odkazy není zrovna nejlepší nápad, protože obrázky jsou vždy výrazně větší, než kdybyste odkazy řešili standardním způsobem (tj. textem pomocí tagu A). Tím zbytečně zvyšujete "váhu" celé stránky a prodlužujete dobu nutnou k jejímu načtení.
  • Obrázkové mapy nejsou podporované všemi prohlížeči, proto nezapomeňte dát na vhodném místě k dispozici jejich alternativu, nejlépe pomocí textových odkazů.
Výhody obrázkových map:
  • Proti navigačním menu složeným z několika menších obrázků má obrázková mapa tu výhodu, že se nestahuje několik souborů současně, ale pouze jediný soubor, což může urychlit přenos.
  • Pomocí map se dají vytvořit velmi efektně vypadající menu, kterých bychom běžnými prostředky dosáhli jen velmi obtížně.
Ať se tedy na svých stránkách rozhodnete pro použití obrázkových map či nikoli, přeji vám hodně štěstí při jejich osvojování. Samozřejmě za týden se můžete těšit na další pokračování našeho seriálu.


Jak vytvářet www stránky - 22. díl

2. květen 2000 - Seriály

Dostali jsme se k posledním dílům našeho seriálu, jehož cílem bylo naučit vás samostatně vytvářet www stránky. Následující týdny tedy věnujeme tagům, které jsme v uplynulých lekcích vynechali. Pro přehlednost budou jednotlivé elementy řazeny podle abecedy.

Tag ACRONYM

Jeden z nových elementů HTML 4.0 používaný například v browserech pro nevidomé uživatele. Slouží pro vysvětlení pojmu nebo zkratky. Běžné vizuální browsery tento tag ignorují.
Ukázka:

<ACRONYM title="HyperText Markup Language">HTML</ACRONYM>

Výsledek:

HTML

V Internet Exploreru se zobrazí pouze text HTML, v browseru, který reprodukuje text pomocí zvuku bude přečten význam zkratky uvedený v parametru title.

Tag ADDRESS

Tento element patří mezi málo používané. Slouží k ohraničení údajů jako je adresa, podpis nebo jméno autora. Interpretace tohoto tagu záleží na prohlížeči, ovšem většina browserů používá kurzívu.
Ukázka:

<ADDRESS>
<A href="mailto:karelkilian@volny.cz">Karel Kilián</A><BR>
<A href="http://www.zive.cz/">Živě</A><BR>
Autor seriálu Jak vytvářet www stránky<BR>
</ADDRESS>

Výsledek:

Karel Kilián
Živě
Autor seriálu Jak vytvářet www stránky

Tag APPLET

Tento tag se dříve používal pro vkládání apletů (např. apletů napsaných v jazyce Java), ovšem aktuální norma HTML doporučuje místo něj používat element OBJECT, který jsme si vysvětlovali ve 20. díle našeho seriálu.

Tag BLOCKQUOTE

Používá se k označení textu, který je citován z jiného zdroje. Interpretace opět záleží na použitém prohlížeči - MS Internet Explorer například tento text odlišuje odsazením od levého okraje stránky. Tento tag má jediný důležitý parametr a sice parametr cite, který obsahuje adresu dokumentu, ze kterého citace pochází.

Ukázka:

<BLOCKQUOTE cite="http://zive.cpress.cz/r-art.asp/id=11436">
<P>V první řadě si musíte vytyčit cíl, kterého svými stránkami chcete dosáhnout. Je rozdíl, zda chcete pouze světu říci "ahoj, tohle jsem já", či zda budete propagovat své programy, založíte si vlastní internetový časopis, nebo budete prezentovat svou firmu. Pro každý účel je vhodný zcela jiný typ webu.</P>
</BLOCKQUOTE>

Výsledek:

V první řadě si musíte vytyčit cíl, kterého svými stránkami chcete dosáhnout. Je rozdíl, zda chcete pouze světu říci "ahoj, tohle jsem já", či zda budete propagovat své programy, založíte si vlastní internetový časopis, nebo budete prezentovat svou firmu. Pro každý účel je vhodný zcela jiný typ webu.

Tag CITE

Další způsob označení textu, který je citován z jiného zdroje. Opět závisí na prohlížeči, jak bude element interpretovat - MS Internet Explorer zobrazuje text uzavřený v elementu CITE kurzívou.
Ukázka:

Takto vypadá obyčejný text <CITE>a tady budeme něco citovat</CITE>.

Výsledek:

Takto vypadá obyčejný text a tady budeme něco citovat.

Tagy DL, DT a DD

Tagy DL, DT a DD slouží k vytváření tzv. "definičních seznamů". Tyto seznamy se hodí například při vytváření slovníčku pojmů. Význam jednotlivých tagů je následující:
  • DL - tento párový tag označuje začátek a konec seznamu
  • DT - označuje termín (text je zarovnán k levému okraji)
  • DD - vysvětlení termínu (text je odsazen od levého okraje)
Ukázka:

<DL>
<DT>Browser
<DD>Program sloužící k zobrazování internetových stránek. Mezi nejznámější browsery patří MS Internet Explorer a Netscape Navigator
<DT>WWW
<DD>Zkratka pro World Wide Web neboli celosvětovou síť, jak bývá nazýván Internet
<DT>Živě
<DD>Denně aktualizovaný server s informacemi ze světa IT.
</DL>

Výsledek:

Browser
Program sloužící k zobrazování internetových stránek. Mezi nejznámější browsery patří MS Internet Explorer a Netscape Navigator
WWW
Zkratka pro World Wide Web neboli celosvětovou síť, jak bývá nazýván Internet
Živě
Denně aktualizovaný server s informacemi ze světa IT.

Tagy DEL a INS

Tyto elementy se používají jen zřídka. Slouží k tomu, aby bylo možné rozlišit, které pasáže byly do dokumenty přidány nebo z něj odstraněny, což najde uplatnění například u právních dokumentů, kde je nutné, aby i dodatečně bylo možné zjistit všechny provedené změny. Oba tagy mají jednoduchou syntaxi, která se skládá ze dvou parametrů:
  • cite - adresa dokumentu, ve kterém je možné najít informace o důvodu provedené změny.
  • datetime - určení data a času, kdy byla změna v dokumentu provedena.
Prohlížeče zpravidla zobrazují text uzavřený v tagu DEL jako přeškrtnutý a text v tagu INS jako podtržený.
Ukázka:

<P>
Výměra požadovaného pozemku je <DEL datetime="2000-04-10T08:15:30-05:00" cite="procneplati.htm">4</DEL><INS datetime="2000-04-10T08:15:30-05:00" cite="duvodnovevymery.htm">4,8</INS> hektarů.
</P>

Výsledek:

Výměra požadovaného pozemku je 4 4,8 hektarů.

Tag DFN

Další z málo používaných elementů, který prohlížeči sděluje, že okolní text je definicí slova uzavřeného v tomto tagu. Podobně jako ve většině případů je takto ohraničený text zobrazen kurzívou.
Ukázka:

Řekne-li se <DFN>Internet Explorer</DFN> míní se tím webový browser od Microsoftu.

Výsledek:

Řekne-li se Internet Explorer míní se tím webový browser od Microsoftu.

Tag DIV

Tento element slouží k ohraničení části textu. Využití nachází zejména v kaskádových stylech, kde se jím označují bloky písma, jež má určitý styl. Nejdůležitější parametry jsou:
  • class - třída, která má být na text aplikována.
  • style - použitý styl formátování písma
  • align - zarovnání bloku vzhledem ke stránce
Zajímavostí je, že většina vizuálních prohlížečů vkládá před uvozovací a uzavírací tag konec řádku, což dokazuje naše Ukázka:

tady je normální text, <DIV>tento text jsme uzavřeli do tagu DIV</DIV> a tento je za ukončovacím tagem.

Výsledek:

tady je normální text,

tento text jsme uzavřeli do tagu DIV
a tento je za ukončovacím tagem.

Ostatní parametry nebudeme probírat, neboť kaskádové styly jsou mimo rozsah tohoto seriálu.

Tag EM

Element EM se používá ke zvýraznění určité pasáže. Jeho podání záleží na prohlížeči - Internet Explorer jej prezentuje jako text psaný kurzívou.
Ukázka:

Tady je normální text <EM>tuto část chceme zdůraznit</EM> a tady pokračujeme normálním textem.

Výsledek:

Tady je normální text tuto část chceme zdůraznit a tady pokračujeme normálním textem.

Pro dnešek, myslím, stačilo. Těšte se na příští díl, ve kterém si představíme další elementy, jež vám zatím zůstaly utajeny.


Jak vytvářet www stránky - 23. díl

9. květen 2000 - Seriály

Minule jsme začali probírat některé méně důležité tagy, na něž nezbylo místo v žádné z předcházejících kapitol. Dnes budeme pokračovat, takže držte si klobouky, jedeme z kopce.

Tag ISINDEX

Tento element není podle poslední normy HTML doporučován, nicméně se v ní vyskytuje, proto jej zmíníme i v tomto přehledu. Výsledkem tohoto tagu je jednořádkový textový vstup pro zadání vstupních dat, jež jsou dále zpracovány nějakým skriptem. Dnes je tag ISINDEX nahrazován ve formulářích elementem INPUT.
Jediným důležitým parametrem je prompt, který zobrazí text před vstupním polem.
Ukázka:

<ISINDEX prompt="Co chcete najít: ">

Výsledek:

Tag KBD

Tento element se používá jen velmi zřídka a slouží k označení textu který má být zadán uživatelem nebo klávesy, kterou má uživatel stisknout. V Internet Exploreru je písmo v tagu KBD odlišeno jinou velikostí fontu.
Ukázka:

K pokračování stiskněte klávesu <KBD>P</KBD>

Výsledek:

K pokračování stiskněte klávesu P

Tag LINK

Tento nepárový element definuje vazbu. Na rozdíl od elementu <A> se může vyskytovat v hlavičce dokumentu, tedy v sekci HEAD. LINK sám o sobě nikam neodkazuje - pouze poskytuje informace o vztahu mezi aktivním dokumentem a nějakým objektem, které mohou být zpracovány prohlížečem různým způsobem. Jeho využití v HTML je ale poměrně sporné, neboť většinu funkcí lze alternovat tagem A, který většina prohlížečů interpretuje stejně, proto jej nebudeme rozebírat podrobněji (využití nachází například u kaskádových stylů, kde umožňuje odkazovat na soubor, v němž jsou uloženy definice tříd).

Tag META

Tento nepárový element umísťovaný v sekci HEAD sděluje prohlížeči nebo webovému serveru informace o dokumentu, které nelze sdělit prostřednictvím standardních elementů HTML. Informace uvedené v tomto tagu nejsou zobrazeny v textu dokumentu a záleží na použitém browseru, jak s nimi naloží.
Základní struktura tagu META je <META name=... content=...> nebo <META http-equiv=... content=...>. Jednotlivé parametry mají následující význam:
  • name - jméno meta tagu, neboli JAKOU informaci tento tag obsahuje.
  • content - specifikuje samotnou informaci
  • http-equiv - má podobný význam jako name. Obsažené informace používají některé http servery ke zpracování jako HTTP hlavičku stránky.
Element META můžeme použít například k zadání informací o kódové stránce dokumentu. Máme-li své dokumenty v české kódové stránce Windows, můžeme použít tag <META http-equiv="Content-Type" content="text/html; charset=windows-1250">.
Stejně tak se tag META dá použít k uložení informací o autorovi dokumentu (např. <META name="Author" content="Karel Kilián">). Tyto informace pak používají některé vyhledávače.
META tag má řadu dalších možností využití, proto si uvedeme jen několik ukázek:
<META http-equiv="Expires" content="Tue, 20 May 2000 20:00:00 GMT">
Tento tag prohlížeči sděluje, že dokument má platnost do 20. května 2000. Pokud se jej tedy uživatel pokusí načíst před tímto datem, pokusí se prohlížeč najít dokument v cache na disku. Pokud zjistí, že datum uvedené v parametru content je nižší, než aktuální datum, stáhne si stránku znovu z Internetu.
<META http-equiv="refresh" content="3,http://www.zive.cz/">
Tento element prohlížeči sděluje, že má po třech vteřinách provést obnovení stránky a určuje adresu stránky, která má být zobrazena. Toho lze využít například k automatickému přesměrování v případě, že se rozhodnete přesunout své stránky na jiný server.
Možností, jak využít element META je ještě mnohem více, ovšem jejich výklad by zabral příliš mnoho místa, proto případné zájemce odkazujeme na web konsorcia W3C.

Tag PRE

Tento element je velice podobný tagu CODE a stejně jako on slouží k zobrazení písma neproporcionálním fontem. Na rozdíl od tagu CODE ale zobrazuje text přesně v té podobě, v jaké je napsán, tedy včetně vícenásobných mezer či zalomení řádku (není tedy nutné používat element <BR>). Využití najde především k zobrazení výpisu zdrojových kódů programů.
Ukázka:

<PRE>
Sub dlouheapryc()
   Selection.Find.ClearFormatting
   Selection.Find.Replacement.ClearFormatting
   With Selection.Find
      .Text = "á"
      .Replacement.Text = "a"
      .Forward = True
      .Wrap = wdFindContinue
      .Format = False
      .MatchCase = False
      .MatchWholeWord = False
      .MatchWildcards = False
      .MatchSoundsLike = False
      .MatchAllWordForms = False
End With
Selection.Find.Execute Replace:=wdReplaceAll
End Sub
</PRE>

Výsledek:

Sub dlouheapryc()
   Selection.Find.ClearFormatting
   Selection.Find.Replacement.ClearFormatting
   With Selection.Find
      .Text = "á"
      .Replacement.Text = "a"
      .Forward = True
      .Wrap = wdFindContinue
      .Format = False
      .MatchCase = False
      .MatchWholeWord = False
      .MatchWildcards = False
      .MatchSoundsLike = False
      .MatchAllWordForms = False
End With
Selection.Find.Execute Replace:=wdReplaceAll
End Sub

To bude pro tento týden vše. Příště se seznámíme se zbývajícími tagy a poslední 25. díl věnujeme několika tipům, trikům a užitečným radám. Těším se opět v pondělí.


Jak vytvářet www stránky - 24. díl

15. květen 2000 - Seriály

Vítám vás u předposledního dílu našeho seriálu o vytváření webových stránek. Podobně jako minule a předminule se stručně podíváme na některé tagy, jež jsme nezmínili v uplynulých dílech. Takže pojďme do toho.

Element Q

Ve 22. díle jsme si vysvětlili element BLOCQUOTE, který slouží k označení textu citovaného z jiného zdroje. Tag Q má prakticky stejný význam, ovšem používá se pro kratší (zpravidla jednořádkové) citace. Na rozdíl od tagu BLOCQUOTE ovšem text není odsazen od levého okraje.
I tento tag má atribut cite, který určuje adresu dokumentu, z nějž pochází citovaná pasáž.
Ukázka:

<Q cite="http://zive.cpress.cz/r-art.asp/id=11726">Rámy milované i nenáviděné. Na jednu stranu přinášejí řadu výhod, na druhou mohou způsobovat problémy.</Q>

Výsledek:

Rámy milované i nenáviděné. Na jednu stranu přinášejí řadu výhod, na druhou mohou způsobovat problémy.

Element SAMP

Tento párový element se používá pro ukázku výstupu nebo výpisu z programů, skriptů atp. Jeho interpretace závisí na použitém prohlížeči, ovšem nejčastěji se zobrazí jako neproporcionální písmo.
Ukázka:

<SAMP>Text formátovaný elementem SAMP</SAMP>

Výsledek:

Text formátovaný elementem SAMP

Element SPAN

Tento tag je velmi podobný tagu DIV (viz. 22. lekce) a stejně jako on nachází uplatnění především v kaskádových stylech, kde slouží k označení textu, kterému je přiřazen určitý styl. Od tagu DIV se liší především tím, že se používá na kratší (jednořádkové) části textu a že před úvodním a po uzavíracím tagu není ve vizuálních prohlížečích vkládáno zalomení řádku. Základní parametry jsou:
  • class - třída, která má být na text aplikována.
  • style - použitý styl formátování písma.
  • align - zarovnání bloku vzhledem ke stránce.

Element STRONG

Formátuje písmo tučným řezem. Ve většině prohlížečů se takto ohraničený text zobrazí zcela shodně, jako kdybyste použili element B, takže není mnoho důvodu k používání tohoto tagu.
Ukázka:

Tady je normální písmo, <STRONG>tady tučné</STRONG> a tady zase normální.

Výsledek:

Tady je normální písmo, tady tučné a tady zase normální

Element VAR

Další z těch méně využívaných elementů. Používá se k označení proměnných a většina browserů zobrazuje takto ohraničený text kurzívou. Vzhledem k existenci tagu I ale není příliš mnoho důvodů pro jeho použití.
Ukázka:

<VAR>rychlost</VAR>=1000:13

Výsledek:

rychlost=1000:13

Element ABBR

Tento element se používá k ohraničení zkratky (např. WWW, HTTP, URI, atp.). Na vlastní formát textu ale nemá žádný vliv.
Ukázka:

Zkratka <ABBR>HTML</ABBR> znamená HyperText Markup Language.

Výsledek:

Zkratka HTML znamená HyperText Markup Language.

Element SCRIPT

Webové stránky nemusí být pouze statické, ale mohou obsahovat řadu dynamických prvků. K oživení slouží malé programy zvané skripty. Nejčastěji se používají dva skriptovací jazyky: JavaScript a VBScript. Vzhledem k jejich obsáhlosti se jimi nebudeme podrobně zabývat, ale ukážeme si alespoň základní parametry k vložení skriptu do stránky.
Element SCRIPT má několik důležitých parametrů:
  • src - skript nemusí být vložen přímo ve stránce, ale může být uložen v externím souboru. Atribut src odkazuje na adresu, kde se soubor se skriptem nachází.
  • type - určuje typ obsahu skriptu. Používáte-li JavaScript, bude mít tento parametr hodnotu text/javascript.
  • language - tento atribut určuje jazyk, ve kterém je skript napsán. Aktuální norma HTML jej však nedoporučuje a k určení jazyka vyžaduje používání atributu type.
Aby starší prohlížeče neměly problémy se zobrazováním skriptů, uzavírá se celý kód skriptu do elementů označujících komentář. Ukážeme si to na následujícím jednoduchém příkladu:
Ukázka:

<SCRIPT type="text/javascript">
<!-- tato značka způsobí, že starší prohlížeče budou chápat následující skript jako komentář a nebudou jej zobrazovat
function square(i) {
document.write("Kolik je druhá mocnina čísla ", i ,"? ","")
return i * i
}
document.write("A tady máme výsledek: ",square(5),".")
//--> touto značkou se pak označuje konec poznámky
</SCRIPT>

Výsledek:

Použijete-li browser, který nepodporuje skripty nebo má vypnuté skriptování, zobrazí se tento text rovnou za slovem výsledek.

Element NOSCRIPT

Podobně jako se u stránek obsahujících rámy používá NOFRAMES k zobrazení obsahu pro prohlížeče, které rámy neumí zpracovat, používá se element NOSCRIPT pro prohlížeče, které neumí zpracovávat skripty nebo mají vypnuté spouštění skriptů. Tímto způsobem můžete návštěvníkům svých stránek nabídnout alternativní obsah, což může být užitečné zejména v případech, kdy je například pomocí skriptů řešena navigace po vašem webu.
Ukázka:

<NOSCRIPT>
Bohužel váš prohlížeč nepodporuje skripty, které jsou potřeba ke správnému zobrazení stránky. Připravili jsme pro vás tedy alespoň zjednodušenou verzi bez skriptů:
...
</NOSCRIPT>

Máme tedy za sebou přehlídku snad všech elementů, které můžete potřebovat při vytváření webových stránek. V příštím závěrečném díle si ukážeme ještě několik tipů a triků a pak už bude jen na vás, jak znalosti získané z tohoto seriálu zužitkujete. Těším se opět za týden.


Jak vytvářet www stránky - 25. díl

22. květen 2000 - Seriály

Vítejte u posledního dílu našeho seriálu, který vás provedl úskalími jazyka zvaného HTML. Dnes se podíváme na to, co můžete pro své stránky udělat, jak je dále vylepšit a také jak je propagovat.

Umístění stránek na server

Jestliže nemáte možnost umístit své stránky na firemní nebo školní server, můžete si například koupit vlastní doménu včetně pronájmu místa na disku, což ale nebývá zrovna nejlevnější a pokud chcete vystavit jen své soukromé stránky, můžete využít webový prostor, který nabízí většina providerů (včetně těch "zadarmových"), nebo využijte nabídky serverů umožňujících hostování stránek zdarma. Představíme vám ve zkratce alespoň ty nejznámější:
  • MujWeb – největší a nejnavštěvovanější česká služba nabízející webhosting zdarma. K dispozici máte 10 MB místa, adresa vašich stránek pak bude www.mujweb.cz/www/něco. Nevýhodou je, že svůj web můžete administrovat výhradně přes www rozhraní, což nevadí skládá-li se vaše prezentace z několika stránek, ovšem updatovat tímto způsobem rozsáhlý web je časově velmi náročné. Stejně tak vám může být nepříjemné vkládání proužkové reklamy na každou stránku.
  • Hyperlink – jedna z nejmladších služeb, která vám dá 12 MB diskového prostoru, možnost přístupu přes www i FTP a adresu www.hyperlink.cz/něco, případně i něco.hyperlink.cz. Na rozdíl od MujWebu nejsou do stránek provozovatelem služby vkládány reklamní bannery a můžete zde zdarma vystavit i komerční prezentaci (podmínkou je zobrazení malé ikonky na titulní stránce vaší prezentace).
  • Centrum – další z portálů nabízející po registraci hostování stránek. Po registraci získáte adresu www.centrum.cz/něco. Bohužel se mi ani po dvaceti minutách surfování po Centru nepodařilo zjistit, jakým způsobem nahrát stránky na server a jaké způsoby administrace tato služba nabízí.. V tomto směru nepomůže ani nápověda....

Statistika přístupů

Patrně vás také bude zajímat, kolik lidí vaše stránky navštívilo, případně odkud na ně přišli. V minulosti byla v módě nejrůznější počítadla, která zobrazovala počet přístupů přímo na stránkách, dnes však trend směřuje ke skrytým počítadlům s podrobnou statistikou. Co nám tedy v tomto směru nabízí český Internet:
  • Navrcholu.cz - tato služba nabízí velmi podrobnou statistiku obsahující počet přístupů a sessions, adresy návštěvníků, rozpis volání počítadla (můžete sledovat které stránky vaši návštěvníci otevřeli) a stejně tak snadno zjistíte i odkud přišli. Máte také možnost nechat si zasílat statistiku každý den elektronickou poštou přímo do své schránky.
  • Counter.cz – zde najdete podobné možnosti, jako u služby Navrcholu, včetně zasílání podrobných statistik e-mailem.
  • TopList – další služba nabízející vedení statistik s podobnými možnostmi jako dvě předcházející, ovšem nezasílá statistiky e-mailem, což považuji za podstatný nedostatek.
  • CNW:Počítadlo – zde si můžete vybrat z několika počítadel (včetně neviditelného počítadla), ze statistik je pak možné zjišťovat IP adresy návštěvníků, datum a čas přístupu, jejich operační systémy a použité browsery. Zajímavá je též možnost nechat si vypsat počty přístupů podle top-level domény za uplynulý měsíc.

Registrace ve vyhledávačích

Aby vás potenciální návštěvníci vašich stránek našli, bude velmi důležitým krokem registrace stránek ve vyhledávačích. Jsou-li vaše stránky pouze v češtině, vystačíte s registrací pouze v českých vyhledávačích. Rozhodně byste neměli zapomenout na nejsilnější kvarteto:
  • Seznam
  • Atlas
  • Centrum
  • Zmije
Budou-li vaše stránky i v anglickém jazyce, zaregistrujte je na velkých světových vyhledávačích jako je Altavista, AllTheWeb, Excite, InfoSeek nebo Yahoo!. V čím více vyhledávačích se zaregistrujete, tím máte větší šanci, že si vás návštěvníci všimnou.

Máte-li stránky v dalších jazykových mutacích, seznamte se s vyhledávači v regionech, ve kterých se tento jazyk používá a zaregistrujte je alespoň u nejnavštěvovanějších vyhledávacích služeb.

Do desíti světových vyhledávačů se také můžete nechat zaregistrovat pomocí služby AddWeb.cz.

Propagace systémem výměnné reklamy

Podstata systému reklamních proužků a ikon je velmi jednoduchá – do svých stránek zakomponujete kód, který zajistí, aby se na vašem serveru zobrazovala reklama ostatních členů. Za každé zobrazení získáváte určitý počet kreditů a za tyto kredity je pak zobrazován váš reklamní proužek na stránkách ostatních členů. Ve výměnné reklamě na českém Internetu dominují dvě služby: Billboard.cz a Mr. Linx. Nebudeme zde, vzhledem k vyrovnanosti a podobnosti obou služeb, preferovat ani jednu ani druhou. Spíše doporučujeme, abyste se podívali na seznam členů, kde se dozvíte, na jakých stránkách se bude zobrazovat vaše reklama a dále podrobně prostudujte podmínky, zejména pak tzv. "výměnný poměr", který vyjadřuje, kolikrát se bude muset zobrazit reklama na vašich stránkách, aby se jednou zobrazil váš reklamní proužek jinde.

Vlastní forma propagace

Kromě systémů výměnné reklamy můžete své stránky propagovat i sami. Vyvarujte se časté chyby, které se dopouští nemálo začínajících webmasterů, a sice rozesílání hromadných e-mailů s upozorněním na své stránky. Velká část českých uživatelů toto zasílání nevyžádané pošty považuje za spamming a oprávněně může požadovat po vašem providerovi, aby vám zrušil připojení k Internetu. Mnohem vhodnější je například výměna ikonek či odkazů se serverem stejného nebo podobného zaměření. Nejlepší způsob je vyhledat v některém vyhledávači podobné stránky a nabídnout jejich majitelům umístění reklamní ikony na vašich stránkách na oplátku za to, když umístí vaší ikonu na svých. Samozřejmě je vhodné zaměřit se na servery, které mají podobně vysokou návštěvnost, neboť je velmi nepravděpodobné, že byste například přemluvili webmastera Seznamu, který denně navštíví několik desítek tisíc návštěvníků, aby na titulní stránku umístil vaší ikonu výměnou za ikonu na vašich stránkách, na které přijde maximálně stovka čtenářů.

Založení konference

Zajímavým rozšířením webové prezentace může být tzv. e-mailová konference. Patrně nejznámější a nejpoužívanější českou službou tohoto typu je Pandora.cz. Důležité je zvolit správný typ konference, neboť každý typ se hodí pro jiné účely. Na výběr máte následující možnosti:
  • obyčejná – tato konference je vhodná pro rychlou komunikaci všech členů. V principu funguje tak, že každý e-mail zaslaný do této konference je ihned poslán všem členům bez jakékoli kontroly. To může být nežádoucí zejména tehdy, když se vám do takové konference přihlásí spammer, který bude obtěžovat nevyžádanými e-maily nesouvisejícími s tématem.
  • moderovaná – tato konference řeší problém se spammováním, neboť každý zaslaný e-mail musí předtím, než je rozeslán, potvrdit moderátor. Na jednu stranu tím získáte naprostou kontrolu nad děním v konferenci, ovšem musíte počítat s tím, že vám přibude práce s kontrolou a potvrzováním všech příspěvků.
  • uzavřená – tento typ konference se hodí například pokud chcete čtenářům, kteří o to projeví zájem, zasílat nějaké informace (ceníky, zprávy, informace o aktualizaci stránek atp.). Do těchto konferencí smí přispívat pouze moderátoři (jimi zaslané zprávy pak obdrží všichni účastníci), takže se jedná pouze o jednosměrnou komunikaci.
Kromě uvedených možností můžete svou konferenci označit jako soukromou, což znamená, že budete schvalovat každého člena, který se chce přihlásit.

Patrně nejvhodnějším kompromisem je obyčejná soukromá konference, která je rychlá, nebude vás zatěžovat potvrzováním všech příspěvků a přitom budete mít kontrolu nad tím, jaké účastníky ve své konferenci máte. Snižuje se také riziko spammingu, neboť řadu spammerů odradí již samotný statut soukromé konference.

Ankety

Interaktivita stránek je jedním ze základních předpokladů správného webu. Všimněte si například, na kolika serverech najdete diskusní fóra umožňující čtenářům vyjádřit svůj názor. Jednou z možností, jak dát návštěvníkům vašich stránek možnost projevit své názory, je jednoduchá anketa. Na českém Internetu můžete využít například službu WebAnkety.cz. Zde si vytvoříte účet, nadefinujete anketní otázky (je možné určit dobu jejich platnosti a lze též nastavit otázky na libovolné období dopředu), vyberete možné varianty odpovědi a pak jen vložíte do stránky kód, který obdržíte při registraci. Při načtení stránky z Internetu se pak návštěvníkovi zobrazí anketní otázka, možné odpovědi a grafické i číselné údaje o tom, kolik hlasujících zvolilo tu kterou odpověď. Zejména je zajímavé, má-li anketa přímou souvislost se stránkou, na které je umístěna (například u článku o nových cenách počítačových sestav se čtenáře zeptáte, zda mu připadají vysoké nebo nízké atp.).

Možností, jak dále vyšperkovat a zdokonalit své www stránky je mnoho, stejně tak existuje hodně způsobů, jak přitáhnout návštěvníky. Pamatujte si ale základní pravidlo, které říká, že není důležité, aby návštěvník na stránky přišel, ale aby se na ně vracel, proto velmi záleží na obsahu a způsobu zpracování vašich stránek. Snažte se, aby vaše webové výtvory byly co možná nejvíce profesionální a aby obsahovaly co nejvíce užitečných informací.

Doufám, že vám náš seriál pomohl překonat nástrahy HTML a tvorby www stránek a přeji vám mnoho úspěchů při prezentaci sebe nebo své firmy na Internetu.

Příští týden se můžete těšit na všechny díly seriálu Jak vytvářet www stránky v jediném souboru k off-line prohlížení. Nebude chybět ani fulltextová nápověda!


Jak vytvářet www stránky

1. listopad 1999 - Seriály
Jak vytvářet www stránky - 1. díl
Dnes začínáme nový seriál, který vás postupně provede jazykem, jehož prostřednictvím můžete vytvářet webové stránky. Ten jazyk se jmenuje HTML (zkratka HyperText Markup Language) a sami uvidíte, že není vůbec složitý. Nejprve se naučíte vytvářet jen základní textové dokumenty, pak probereme grafiku, tabulky, na závěr se dostaneme ke kaskádovým stylům a bude-li zájem, budeme se v dalších dílech zabývat rozšířeními, které vyšperkují vaše www stránky.

8. listopad 1999 - Seriály
Jak vytvářet www stránky - 2. díl
V minulém díle jsme si vysvětlili základní strukturu HTML dokumentů, takže dnes se směle můžeme pustit do první www stránky. Pravda, nebude to zatím žádný zázrak, ale začínat se musí jednoduše

15. listopad 1999 - Seriály
Jak vytvářet www stránky - 3. díl
V minulém díle jsme si vysvětlili, jak definovat titulek stránky a jak zobrazit jednoduchý text v okně prohlížeče. Dnes se podíváme na to, jak určit základní (globální) vlastnosti stránky.

22. listopad 1999 - Seriály
Jak vytvářet www stránky - 4. díl
Formátování textu je základem každé www stránky. Mnoho tvůrců webových stránek používá grafiku, která zbytečně zatěžuje návštěvníky dlouhou dobou potřebnou pro její stažení a zobrazení. Podobného nebo stejného efektu lze často dosáhnout vhodně zvoleným formátováním, ale i zde platí zlaté pravidlo "někdy méně znamená více".

29. listopad 1999 - Seriály
Jak vytvářet www stránky - 5. díl
Nadpisy
Dnešním tématem pátého dílu seriálu o vytváření www stránek budou nadpisy. Nadpisy slouží k optickému členění stránky a je vhodné zachovávat při jejich používání jisté konvence.

13. prosinec 1999 - Seriály
Jak vytvářet www stránky - 6. díl
Vítejte u šestého pokračování našeho seriálu, který vás provede základy vytváření webových stránek. V dnešním díle se podíváme na to, jak lze vytvořit seznamy s odrážkami a krátce také nahlédneme do světa hyperlinkových odkazů, které jsou alfou a omegou Internetu.

20. prosinec 1999 - Seriály
Jak vytvářet www stránky - 7. díl
Odkazy
V šestém díle jsme si vysvětlili základy vytváření hyperlinkových odkazů. Shrnuto do jedné věty: hyperlinkový odkaz je část dokumentu (zpravidla zvýrazněná), která na kliknutí myší (případně na jiný podnět) aktivuje nějaké spojení. Může to být nejen spojení na jinou www stránku, ale třeba na obrázek, zvuk, video, nebo jakýkoli jiný soubor. Stejně tak existují odkazy, které vedou na jiné místo na téže stránce.

27. prosinec 1999 - Seriály
Jak vytvářet www stránky - 8. díl
Obrázky
Jak by asi vypadaly internetové stránky bez grafiky? V některých případech možná dobře, ale většinou potřebujete návštěvníka něčím zaujmout, upoutat jeho pozornost, a k tomu právě slouží různé grafické prvky.

3. leden 2000 - Seriály
Jak vytvářet www stránky - 9. díl
Ve čtvrtém díle jsme si pověděli něco málo o formátování písma v HTML dokumentech. Pokud náš seriál sledujete od začátku, pak umíte tučné písmo, kurzívu, podtržené písmo a sedm dalších typů formátování. Jak ale například udělat barevný text, text určité velikosti, nebo text, který je napsaný jiným než standardním písmem? Toto umožňuje párový tag FONT, kterému věnujeme dnešní díl našeho seriálu.

10. leden 2000 - Seriály
Jak vytvářet www stránky - 10. díl
Tabulky
Jak jsem slíbil v minulém díle, budeme se dnes věnovat poněkud náročnějšímu tématu - tabulkám. Protože toto téma je poněkud obsáhlejší, budeme se mu věnovat i v příštích dílech našeho seriálu.

17. leden 2000 - Seriály
Jak vytvářet www stránky - 11. díl
V minulém díle jsme si vysvětlili, že k vytvoření tabulky vystačíme se třemi základními tagy - TABLE, TR a TD. Zmínili jsme také některé parametry, s jejichž pomocí je možné určit zarovnání obsahu buňky, barvy či třeba šířku mřížky. Dnes se budeme věnovat teorii a podíváme se podrobně na všechny parametry, které můžete při tvorbě tabulek potřebovat.

24. leden 2000 - Seriály
Jak vytvářet www stránky - 12. díl
V minulém díle jsme se zaměřili trochu více na teorii, které se budeme věnovat i dnes, a pak si ukážeme, jak můžete tabulky prakticky využít při formátování www stránek.

31. leden 2000 - Seriály
Jak vytvářet www stránky - 13. díl
Formuláře
Dosud jsme se věnovali pouze tomu, jak předat informace návštěvníkům stránek, tedy směrem od vás. Důležitým prvkem Internetu je ale komunikace a to komunikace obousměrná. Je sice pěkné, když budete moci sdělit svůj názor, ovšem bylo by více než dobré, kdybyste umožnili sdělit názor i vašim čtenářům. K tomu existuje několik způsobů jako například diskuzní fóra, knihy návštěv nebo formuláře. Právě poslední zmíněný způsob bude tématem tohoto dílu našeho seriálu.

7. únor 2000 - Seriály
Jak vytvářet www stránky - 14. díl
Formuláře - pokračování
V minulém díle jsme si ukázali několik základních prvků potřebných k vytvoření formuláře. Dnes budeme v tomto tématu pokračovat a povíme si o dalších prvcích, které je možné ve formulářích použít.

21. únor 2000 - Seriály
Jak vytvářet www stránky - 15. díl
Formuláře - 2. pokračování
Minulé dva díly jsme věnovali formulářům a nejinak tomu bude i tentokrát. V tomto již patnáctém pokračování se podíváme na další prvky, které lze umístit do formuláře a na závěr vás čeká lahůdka, díky níž budou moci návštěvníci vašich stránek vyhledávat v českém Internetu pomocí jednoho ze tří největších vyhledávacích serverů. Příští týden bude trošku oddychový, protože si ukážeme několik tipů a triků, ale na to si budete muset ještě sedm dnů počkat. Takže hurá na formuláře!

28. únor 2000 - Seriály
Jak vytvářet www stránky - 16. díl
Formuláře - 3. pokračování
Dnes si ukážeme, jak můžete vyšperkovat své webové formuláře pomocí několika jednoduchých fíglů. Na závěr si ukážeme několik tipů a triků, které zatraktivní vaše stránky a také usnadní orientaci vašim návštěvníkům.

27. březen 2000 - Seriály
Jak vytvářet www stránky - 17. díl
V uplynulých šestnácti dílech jsme si poměrně podrobně vysvětlili, jak vytvářet www stránky. Pokud jste vydrželi a četli pečlivě každé pokračování, pak umíte v tuto chvíli vytvořit vlastní webovou prezentaci a možná vás napadá otázka, jak dostat stránky ze svého pevného disku na Internet. Právě tomuto tématu věnujeme dnešní kapitolu.

3. duben 2000 - Seriály
Jak vytvářet www stránky - 18. díl
Rámy milované i nenáviděné. Na jednu stranu přinášejí řadu výhod, na druhou mohou způsobovat problémy. Ať tak nebo tak, do HTML patří a proto jim věnujeme dva díly našeho seriálu.

10. duben 2000 - Seriály
Jak vytvářet www stránky - 19. díl
V předcházejícím díle jsme si vysvětlili základy vytváření stránek s rámy – umíte tedy vytvořit stránku, která se skládá z několika jiných stránek a umíte také určit jejich rozložení. Kouzlo rámů ale spočívá v něčem jiném, než pouze v tom, že načtete do prohlížeče více stránek současně. Jak jsme již naznačili, slouží rámy především ke snadnějšímu ovládání stránek. Povíme si také něco o nevýhodách rámů.

17. duben 2000 - Seriály
Jak vytvářet www stránky - 20. díl
Vkládání objektů
Multimediální rozšíření HTML umožňují autorům webových stránek vkládání obrázků, apletů, video klipů a dalších rozšíření, jež mohou stránku proměnit doslova k nepoznání.

25. duben 2000 - Seriály
Jak vytvářet www stránky - 21. díl
Obrázkové mapy
Tématem tohoto dílu budou obrázkové nebo též "klikací" mapy. Názory na jejich použití se liší - můžete se setkat s názory, že klikací mapy jsou přežitkem a jejich použití není z mnoha důvodů doporučené, jiné zdroje je zase doporučují, neboť umožňují snadné vytváření různých menu. Ať je pravda na té které straně, obrázkové mapy jsou součástí HTML a proto v našem seriálu prostě nemohou chybět.

2. květen 2000 - Seriály
Jak vytvářet www stránky - 22. díl
Dostali jsme se k posledním dílům našeho seriálu, jehož cílem bylo naučit vás samostatně vytvářet www stránky. Následující týdny tedy věnujeme tagům, které jsme v uplynulých lekcích vynechali.

9. květen 2000 - Seriály
Jak vytvářet www stránky - 23. díl
Minule jsme začali probírat některé méně důležité tagy, na něž nezbylo místo v žádné z předcházejících kapitol. Dnes budeme pokračovat, takže držte si klobouky, jedeme z kopce.

15. květen 2000 - Seriály
Jak vytvářet www stránky - 24. díl
Vítám vás u předposledního dílu našeho seriálu o vytváření webových stránek. Podobně jako minule a předminule se stručně podíváme na některé tagy, jež jsme nezmínili v uplynulých dílech. Takže pojďme do toho.

22. květen 2000 - Seriály
Jak vytvářet www stránky - 25. díl
Vítejte u posledního dílu našeho seriálu, který vás provedl úskalími jazyka zvaného HTML. Dnes se podíváme na to, co můžete pro své stránky udělat, jak je dále vylepšit a také jak je propagovat.